/*
 * GENERATED FROM tools/penpot-visual-foundation/fstcho-design-tokens.json.
 * Edit the Penpot token source and run:
 * node tools/penpot-visual-foundation/build-theme-tokens.mjs
 */

@font-face {
  font-family: "FST Display";
  src: url("../assets/fonts/oswald-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "FST Display";
  src: url("../assets/fonts/oswald-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:where(:root, .theme-fstcho-next, .theme-fstcho-admin-next) {
  --fst-token-palette-ink: #202328;
  --fst-token-palette-ink-soft: #343b40;
  --fst-token-palette-muted: #6d7478;
  --fst-token-palette-paper: #f8f6f1;
  --fst-token-palette-paper-deep: #eeebe4;
  --fst-token-palette-white: #fffefa;
  --fst-token-palette-surface: #fffefb;
  --fst-token-palette-line: #d8d4ca;
  --fst-token-palette-line-strong: #aaa79f;
  --fst-token-palette-orange: #ee5205;
  --fst-token-palette-orange-strong: #c84400;
  --fst-token-palette-orange-text: #a3420f;
  --fst-token-palette-orange-on-dark: #ff9a56;
  --fst-token-palette-orange-soft: #f6e7d7;
  --fst-token-palette-positive: #438650;
  --fst-token-palette-warning: #ad7200;
  --fst-token-palette-danger: #a72d3d;
  --fst-token-palette-footer: #20262b;
  --fst-token-space-1: 4px;
  --fst-token-space-2: 8px;
  --fst-token-space-3: 12px;
  --fst-token-space-4: 16px;
  --fst-token-space-5: 20px;
  --fst-token-space-6: 24px;
  --fst-token-space-8: 32px;
  --fst-token-space-12: 48px;
  --fst-token-radius-xs: 3px;
  --fst-token-radius-base: 4px;
  --fst-token-stroke-hairline: 1px;
  --fst-token-stroke-focus: 2px;
  --fst-token-size-control-compact: 40px;
  --fst-token-size-control: 48px;
  --fst-token-size-control-large: 56px;
  --fst-token-size-icon-compact: 18px;
  --fst-token-size-icon: 24px;
  --fst-token-size-content: 1320px;
  --fst-token-size-reading: 820px;
  --fst-token-font-display: "FST Display", Oswald, "Arial Narrow";
  --fst-token-font-text: Montserrat, "Segoe UI", Arial;
  --fst-token-font-map: "Bahnschrift SemiCondensed", "Roboto Condensed";
  --fst-token-font-size-caption: 11px;
  --fst-token-font-size-body-small: 13px;
  --fst-token-font-size-body: 16px;
  --fst-token-font-size-title-small: 24px;
  --fst-token-font-size-title: 40px;
  --fst-token-font-weight-regular: 400;
  --fst-token-font-weight-semibold: 600;
  --fst-token-font-weight-bold: 700;
  --fst-token-letter-spacing-normal: 0px;
  --fst-token-letter-spacing-label: 0.6px;
  --fst-token-letter-spacing-map: 0.3px;
  --fst-token-opacity-disabled: 42%;
  --fst-token-opacity-coordinate: 52%;
  --fst-token-opacity-relief: 18%;
  --fst-color-text: #343b40;
  --fst-color-heading: #202328;
  --fst-color-muted: #6d7478;
  --fst-color-canvas: #f8f6f1;
  --fst-color-surface: #fffefb;
  --fst-color-surface-muted: #eeebe4;
  --fst-color-border: #d8d4ca;
  --fst-color-border-strong: #aaa79f;
  --fst-color-action-primary: #ee5205;
  --fst-color-action-primary-hover: #c84400;
  --fst-color-action-secondary: #202328;
  --fst-color-focus: #ee5205;
  --fst-color-status-positive: #438650;
  --fst-color-status-warning: #ad7200;
  --fst-color-status-danger: #a72d3d;
  --fst-button-primary-fill: #ee5205;
  --fst-button-primary-text: #fffefa;
  --fst-button-secondary-fill: #fffefb;
  --fst-button-secondary-text: #202328;
  --fst-button-secondary-stroke: #202328;
  --fst-button-height: 48px;
  --fst-button-radius: 4px;
  --fst-field-fill: #fffefb;
  --fst-field-stroke: #aaa79f;
  --fst-field-height: 48px;
  --fst-field-radius: 4px;
  --fst-table-header-fill: #eeebe4;
  --fst-table-row-fill: #fffefb;
  --fst-table-divider: #d8d4ca;
  --fst-status-positive: #438650;
  --fst-status-warning: #ad7200;
  --fst-status-danger: #a72d3d;
  --fst-identity-rail-line-width: 2px;
  --fst-identity-rail-coordinate-width: 91px;
  --fst-identity-rail-coordinate-offset-inline: 44px;
  --fst-disclosure-panel-width: 380px;
  --fst-disclosure-panel-padding: 26px;
  --fst-disclosure-panel-fill: #20262b;
  --fst-disclosure-panel-text: #fffefa;
  --fst-density-control-height: 48px;
  --fst-density-row-height: 64px;
  --fst-density-section-gap: 48px;
  --fst-density-surface-padding: 24px;
  --fst-viewport-gutter: 44px;
  --fst-viewport-content: 1320px;
  --fst-viewport-rail: 220px;

  /* Stable aliases used by the Twig/CSS component implementation. */
  --fst-ink: var(--fst-color-heading);
  --fst-ink-soft: var(--fst-color-text);
  --fst-copy: var(--fst-color-text);
  --fst-muted: var(--fst-color-muted);
  --fst-paper: var(--fst-color-canvas);
  --fst-paper-deep: var(--fst-color-surface-muted);
  --fst-white: var(--fst-token-palette-white);
  --fst-surface: color-mix(in srgb, var(--fst-color-surface) 90%, transparent);
  --fst-surface-solid: var(--fst-color-surface);
  --fst-surface-muted: var(--fst-color-surface-muted);
  --fst-soft: var(--fst-color-surface-muted);
  --fst-line: var(--fst-color-border);
  --fst-line-strong: var(--fst-color-border-strong);
  --fst-accent: var(--fst-color-action-primary);
  --fst-accent-strong: var(--fst-color-action-primary-hover);
  --fst-accent-dark: var(--fst-color-action-primary-hover);
  --fst-accent-text: var(--fst-token-palette-orange-text);
  --fst-accent-on-dark: var(--fst-token-palette-orange-on-dark);
  --fst-accent-soft: var(--fst-token-palette-orange-soft);
  --fst-green: var(--fst-color-status-positive);
  --fst-warning: var(--fst-color-status-warning);
  --fst-danger: var(--fst-color-status-danger);
  --fst-status-neutral-marker: var(--fst-token-palette-line-strong);
  --fst-status-positive-text: color-mix(in srgb, var(--fst-green) 72%, var(--fst-ink));
  --fst-status-warning-text: color-mix(in srgb, var(--fst-warning) 72%, var(--fst-ink));
  --fst-status-warning-marker: var(--fst-warning);
  --fst-status-danger-text: color-mix(in srgb, var(--fst-danger) 80%, var(--fst-ink));
  --fst-status-danger-marker: var(--fst-danger);
  --fst-focus: var(--fst-color-focus);
  --fst-footer: var(--fst-token-palette-footer);
  --fst-content-width: var(--fst-viewport-content);
  --fst-reading-width: var(--fst-token-size-reading);
  --fst-radius: var(--fst-token-radius-base);
  --fst-radius-sm: var(--fst-token-radius-base);
  --fst-radius-xs: var(--fst-token-radius-xs);
  --fst-shadow: 0 18px 48px color-mix(in srgb, var(--fst-ink) 8%, transparent);
  --fst-shadow-hover: 0 24px 64px color-mix(in srgb, var(--fst-ink) 13%, transparent);
  --fst-font-sans: var(--fst-token-font-display);
  --fst-font-condensed: var(--fst-token-font-display);
  --fst-font-text: var(--fst-token-font-text);
  --fst-font-body: var(--fst-token-font-text);
  --fst-font-map: var(--fst-token-font-map);
  --fst-ease: cubic-bezier(.2, .72, .2, 1);
  --fst-duration-fast: 160ms;
  --fst-duration: 280ms;
  --fst-grid: minmax(var(--fst-viewport-gutter), 1fr) minmax(0, var(--fst-content-width)) minmax(var(--fst-viewport-gutter), 1fr);
}

:where(.theme-fstcho-admin-next, .theme-fstcho-next.fst-density-operational, .theme-fstcho-next.path-management, .theme-fstcho-next.fst-service-route) {
  --fst-density-control-height: 44px;
  --fst-density-row-height: 56px;
  --fst-density-section-gap: 32px;
  --fst-density-surface-padding: 20px;
}

@media (max-width: 620px) {
  :where(.theme-fstcho-next, .theme-fstcho-admin-next) {
    --fst-viewport-gutter: 20px;
    --fst-viewport-content: 350px;
    --fst-viewport-rail: 0px;
  }
}