/* =========================================================================
   АВТОСПЕКТР Design System — Tokens
   Colors, type, spacing, radii, shadows, motion. Import in every artifact.
   ========================================================================= */

/* Manrope — самохостинг, переменный шрифт (variable font, wght 200-800).
   Файлы в assets/fonts/ — восстанавливаются на этапе сборки, не коммитятся. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  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;
}

/* JetBrains Mono — самохостинг, переменный шрифт (variable font, wght 100-800). */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  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;
}

:root {
  /* ============= COLOR ============= */

  /* Brand */
  --as-navy-900: #06283F;     /* deepest, hover on navy */
  --as-navy-800: #0B3D63;     /* primary navy — headers, logo */
  --as-navy-700: #134F7E;
  --as-blue-600: #1E70B8;     /* clear info blue — links, badges */
  --as-blue-500: #3D8FD4;
  --as-blue-100: #DCEAF7;     /* tinted surfaces, badge bg */
  --as-blue-50:  #EEF5FC;

  /* Accent (CTA) */
  --as-orange-700: #C8520F;   /* press */
  --as-orange-600: #E55D17;   /* hover */
  --as-orange-500: #F26A1F;   /* primary CTA */
  --as-orange-100: #FDE3D2;   /* highlight bg */
  --as-orange-50:  #FFF3EA;

  /* Neutrals — ink (text on light) */
  --as-ink-900: #0F1A24;      /* body, headings */
  --as-ink-700: #243240;      /* strong UI text */
  --as-ink-600: #3D4A57;      /* secondary */
  --as-ink-500: #6B7785;      /* tertiary, captions */
  --as-ink-400: #8C97A3;      /* placeholders */
  --as-ink-300: #B3BCC7;      /* disabled text */

  /* Neutrals — surface (light) */
  --as-surface-0:   #FFFFFF;  /* page */
  --as-surface-1:   #F5F7FA;  /* raised panel */
  --as-surface-2:   #EDF1F6;  /* zebra row, hover row */
  --as-surface-3:   #E3E9F0;  /* deeper panel */

  /* Hairlines */
  --as-border-100: #ECF0F5;   /* subtle dividers */
  --as-border-200: #DCE3EC;   /* standard */
  --as-border-300: #C2CCD9;   /* emphasized */
  --as-border-400: #98A4B2;

  /* Semantic */
  --as-success-700: #0F5E3A;
  --as-success-500: #177D4D;
  --as-success-100: #DCEFE3;

  --as-warn-700:    #5C4500;
  --as-warn-500:    #C2A000;
  --as-warn-100:    #FFF705;

  --as-danger-700: #8F1D17;
  --as-danger-500: #B3261E;
  --as-danger-100: #F8DCDA;

  --as-info-500:   var(--as-blue-600);
  --as-info-100:   var(--as-blue-100);

  /* Direction colours — used to colour-code Паром/Авиа/Переезды */
  --as-dir-parom:    #0B3D63;  /* navy — sea */
  --as-dir-avia:     #1E70B8;  /* sky blue */
  --as-dir-pereezd:  #F26A1F;  /* orange — boxes */

  /* Semantic role aliases — light theme defaults */
  --fg-1: var(--as-ink-900);
  --fg-2: var(--as-ink-600);
  --fg-3: var(--as-ink-500);
  --fg-inverse: #FFFFFF;
  --bg-1: var(--as-surface-0);
  --bg-2: var(--as-surface-1);
  --bg-3: var(--as-surface-2);
  --bg-inverse: var(--as-navy-800);
  --border: var(--as-border-200);
  --border-strong: var(--as-border-300);
  --link: var(--as-blue-600);
  --link-hover: var(--as-navy-800);
  --accent: var(--as-orange-500);
  --accent-hover: var(--as-orange-600);
  --accent-press: var(--as-orange-700);

  /* Themed roles — used by components that flip with theme.
     Light theme values below; [data-theme="dark"] overrides at bottom of file. */
  --t-page:        #FFFFFF;
  --t-surface:     #FFFFFF;
  --t-surface-2:   #F5F7FA;
  --t-surface-3:   #EDF1F6;
  --t-text-1:      #0F1A24;
  --t-text-2:      #3D4A57;
  --t-text-3:      #6B7785;
  --t-text-muted:  #94A8BD;
  --t-border:      #DCE3EC;
  --t-border-2:    #ECF0F5;
  --t-header-bg:   rgba(255,255,255,.92);
  --t-subnav-bg:   #F5F7FA;
  --t-hero-bg:     #FFFFFF;
  --t-hero-grid:   rgba(11,61,99,.05);
  --t-hero-glow-1: rgba(30,112,184,.10);
  --t-hero-glow-2: rgba(242,106,31,.06);
  --t-hero-text:   #0F1A24;
  --t-hero-text-2: #3D4A57;
  --t-hero-meta:   #6B7785;
  --t-panel:       #FFFFFF;
  --t-panel-border:#DCE3EC;
  --t-panel-text:  #0F1A24;
  --t-panel-text-2:#6B7785;
  --t-panel-fill:  #F5F7FA;
  --t-panel-fill-2:#FFFFFF;
  --t-panel-stroke:rgba(15,26,36,.12);
  --t-route-line:  rgba(11,61,99,.18);
  --t-port-dot:    #0B3D63;
  --t-ferry-bg:    #0B3D63;
  --t-ferry-fg:    #FFFFFF;
  --t-tile-bg:     #F5F7FA;
  --t-tile-border: #DCE3EC;
  --t-tile-text:   #0F1A24;
  --t-tile-text-2: #6B7785;
  --t-input-bg:    #FFFFFF;
  --t-input-border:#C2CCD9;
  --t-input-text:  #0F1A24;
  --t-slider-track:#DCE3EC;

  /* ============= TYPOGRAPHY ============= */

  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: var(--font-sans);

  /* Type scale (desktop) */
  --fs-display-1: 64px;       /* hero */
  --fs-display-2: 48px;       /* section hero */
  --fs-h1:        36px;
  --fs-h2:        28px;
  --fs-h3:        22px;
  --fs-h4:        18px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   12px;
  --fs-eyebrow:   12px;       /* ALL-CAPS section labels */

  /* Line heights */
  --lh-tight:   1.05;
  --lh-heading: 1.2;
  --lh-body:    1.5;
  --lh-table:   1.4;

  /* Tracking */
  --tr-display:  -0.02em;
  --tr-heading:  -0.01em;
  --tr-body:      0;
  --tr-eyebrow:   0.08em;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* ============= SPACING ============= */

  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-7:   32px;
  --sp-8:   40px;
  --sp-9:   56px;
  --sp-10:  72px;
  --sp-11:  96px;
  --sp-12: 128px;

  /* Layout */
  --layout-max:   1240px;
  --layout-wide:  1360px;     /* tariff pages */
  --layout-pad-d: 24px;
  --layout-pad-m: 16px;

  /* ============= RADII ============= */

  --r-1:   4px;
  --r-2:   8px;
  --r-3:  12px;
  --r-4:  16px;
  --r-pill: 999px;

  /* ============= SHADOWS ============= */

  --shadow-1: 0 1px 2px rgba(15, 26, 36, .06);
  --shadow-2: 0 2px 8px rgba(15, 26, 36, .08);
  --shadow-3: 0 6px 24px rgba(15, 26, 36, .10);
  --shadow-focus: 0 0 0 2px var(--as-orange-500);

  /* ============= MOTION ============= */

  --ease-out:    cubic-bezier(.2, .6, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --dur-1:  120ms;
  --dur-2:  150ms;
  --dur-3:  250ms;
  --dur-4:  400ms;
}

/* =========================================================================
   Base reset + type defaults
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Numbers always tabular on tables, prices, schedules */
.as-num,
table,
.as-price,
.as-schedule {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* =========================================================================
   Semantic type classes — h1, h2, p, eyebrow, etc.
   ========================================================================= */

.as-display-1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  font-weight: var(--fw-extra);
  color: var(--fg-1);
}

.as-display-2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  font-weight: var(--fw-extra);
  color: var(--fg-1);
}

.as-h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  margin: 0;
}

.as-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  margin: 0;
}

.as-h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0;
}

.as-h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0;
}

.as-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

.as-body-sm {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.as-caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--fg-3);
}

.as-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--as-blue-600);
}

.as-price {
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

.as-mono {
  font-family: var(--font-mono);
}

/* Mobile down-step */
@media (max-width: 768px) {
  :root {
    --fs-display-1: 44px;
    --fs-display-2: 34px;
    --fs-h1:        28px;
    --fs-h2:        22px;
    --fs-h3:        18px;
  }
}

/* =========================================================================
   Focus ring — every interactive element gets the orange ring
   ========================================================================= */

:focus-visible {
  outline: 2px solid var(--as-orange-500);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* =========================================================================
   Dark theme — toggle via [data-theme="dark"] on <html> or <body>
   ========================================================================= */

[data-theme="dark"] {
  --t-page:        #06283F;
  --t-surface:     #0B3D63;
  --t-surface-2:   #134F7E;
  --t-surface-3:   #1A5E91;
  --t-text-1:      #FFFFFF;
  --t-text-2:      #DCEAF7;
  --t-text-3:      #94A8BD;
  --t-text-muted:  #6B7785;
  --t-border:      rgba(255,255,255,.1);
  --t-border-2:    rgba(255,255,255,.06);
  --t-header-bg:   rgba(6,40,63,.88);
  --t-subnav-bg:   #06283F;
  --t-hero-bg:     #06283F;
  --t-hero-grid:   rgba(61,143,212,.10);
  --t-hero-glow-1: rgba(30,112,184,.18);
  --t-hero-glow-2: rgba(242,106,31,.08);
  --t-hero-text:   #FFFFFF;
  --t-hero-text-2: #DCEAF7;
  --t-hero-meta:   #94A8BD;
  --t-panel:       rgba(255,255,255,.04);
  --t-panel-border:rgba(255,255,255,.1);
  --t-panel-text:  #FFFFFF;
  --t-panel-text-2:#94A8BD;
  --t-panel-fill:  rgba(255,255,255,.04);
  --t-panel-fill-2:rgba(255,255,255,.05);
  --t-panel-stroke:rgba(255,255,255,.2);
  --t-route-line:  rgba(255,255,255,.15);
  --t-port-dot:    #FFFFFF;
  --t-ferry-bg:    #FFFFFF;
  --t-ferry-fg:    #0B3D63;
  --t-tile-bg:     rgba(255,255,255,.04);
  --t-tile-border: rgba(255,255,255,.08);
  --t-tile-text:   #FFFFFF;
  --t-tile-text-2: #94A8BD;
  --t-input-bg:    rgba(255,255,255,.06);
  --t-input-border:rgba(255,255,255,.18);
  --t-input-text:  #FFFFFF;
  --t-slider-track:rgba(255,255,255,.14);
}