/* ==========================================================================
   Смарт Решения — Design System · Tokens
   --------------------------------------------------------------------------
   Dark is the DEFAULT theme: the dark palette lives on bare `:root`, and the
   light palette is an explicit opt-in via [data-theme="light"]. Nothing in the
   component layer references a raw colour — every surface, line and text
   colour resolves through a semantic alias, so one token remap flips the
   entire site.

   Scales are fluid (clamp) rather than stepped through !important overrides,
   which is what keeps the mobile layout honest without duplicating rules.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Fonts */
@font-face {
  font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/golos-text-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: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/golos-text-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/golos-text-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: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/golos-text-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;
}
@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;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; 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: 400 500; 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: 400 500; 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: 400 500; 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 {
  --font-display: 'Manrope', 'Golos Text', 'Helvetica Neue', Arial, sans-serif;
  --font-text: 'Golos Text', 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
}

/* ------------------------------------------------- 2. Palette (primitives) */
:root {
  /* Graphite ramp — identical in both themes, referenced only by aliases. */
  --white: #FFFFFF;
  --ink-050: #F7F8F9;
  --ink-100: #F0F1F4;
  --ink-150: #E6E8EC;
  --ink-200: #D8DBE1;
  --ink-300: #B5BAC4;
  --ink-400: #858B99;
  --ink-500: #5A6070;
  --ink-600: #3A3F4A;
  --ink-700: #242830;
  --ink-800: #16191F;
  --ink-900: #0E1014;
  --black: #000000;

  /* Night ramp — the dark theme's own structural greys. */
  --night-900: #05070E;
  --night-850: #070A13;
  --night-800: #0A0E1A;
  --night-700: #0E1322;

  /* Accent: one restrained blue, two ramps (light-on-dark / dark-on-light). */
  --blue-050: #F2F5FE;
  --blue-100: #E1E8FB;
  --blue-200: #BFCDF5;
  --blue-300: #94A9EE;
  --blue-400: #4E6BE0;
  --blue-500: #3454D6;
  --blue-600: #2745C9;
  --blue-700: #1C3399;
  --blue-900: #101E5C;

  /* Semantic status — data and form states only, never decoration. */
  --positive: #48C79A;
  --caution: #E0B44A;
  --negative: #F1836B;
}

/* ------------------------------------ 3. Dark theme — the DEFAULT surface */
:root {
  color-scheme: dark;

  /* Text */
  --text-primary: #EDF1FA;
  --text-secondary: rgba(226, 233, 248, .70);
  --text-tertiary: rgba(226, 233, 248, .56);
  --text-inverse: #0A0E18;
  --text-inverse-secondary: rgba(226, 233, 248, .70);
  --text-accent: #9DB0FF;

  /* Surfaces */
  --surface-page: var(--night-850);
  --surface-subtle: rgba(255, 255, 255, .030);
  --surface-card: rgba(255, 255, 255, .045);
  --surface-card-hover: rgba(255, 255, 255, .075);
  /* In dark mode an "inverse" band cannot invert — it reads as a raised
     shelf instead, so it needs enough lift to separate from the page. */
  --surface-inverse: #0C1120;
  --surface-inverse-raised: rgba(255, 255, 255, .06);
  --surface-accent-soft: rgba(94, 124, 255, .16);
  --surface-scrim: rgba(5, 7, 14, .78);

  /* Lines */
  --line-hairline: rgba(255, 255, 255, .11);
  --line-strong: rgba(255, 255, 255, .24);
  --line-inverse: rgba(255, 255, 255, .11);
  --line-inverse-strong: rgba(255, 255, 255, .26);
  --line-accent: #5F7CFF;
  --line-heavy: rgba(237, 241, 250, .85);

  /* Interactive */
  --action-solid-bg: #EDF1FA;
  --action-solid-bg-hover: #FFFFFF;
  --action-solid-fg: #0A0E18;
  --action-accent-bg: #3D5CE8;
  --action-accent-bg-hover: #4E6BE0;
  --action-accent-fg: #FFFFFF;
  --action-ghost-bg-hover: rgba(255, 255, 255, .07);
  --focus-ring: #8FA6FF;
  --state-disabled-fg: rgba(226, 233, 248, .34);
  --state-disabled-bg: rgba(255, 255, 255, .05);
  --selection-bg: rgba(94, 124, 255, .38);

  /* Glass */
  --glass-border: rgba(255, 255, 255, .14);
  --glass-highlight: rgba(255, 255, 255, .40);
  --glass-fill: linear-gradient(152deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .028) 55%, rgba(94, 124, 255, .07));
  --blur-glass: blur(26px) saturate(150%);

  /* Elevation */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(2, 6, 18, .40);
  --shadow-md: 0 12px 44px rgba(2, 6, 18, .50);
  --shadow-lg: 0 28px 80px rgba(2, 6, 18, .58);
  --shadow-glass: 0 24px 70px rgba(2, 6, 18, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
  --glow-under: 0 36px 110px -24px rgba(78, 107, 224, .50);
  --glow-accent: 0 0 0 1px rgba(143, 166, 255, .28), 0 18px 60px -18px rgba(94, 124, 255, .55);

  /* Ambient page wash — the dark theme's signature */
  --aurora-1: rgba(52, 84, 214, .22);
  --aurora-2: rgba(28, 51, 153, .16);
  --aurora-3: rgba(39, 69, 201, .15);

  /* Navbar */
  --nav-bg: rgba(7, 10, 19, .55);
  --nav-bg-scrolled: rgba(7, 10, 19, .82);
}

/* ------------------------------------------- 4. Light theme — explicit opt-in */
:root[data-theme='light'] {
  color-scheme: light;

  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-500);
  /* NOT --ink-400 (#858B99): at the 12–13px used for overlines, indices and
     captions it lands at 3.4:1 on white, below WCAG AA's 4.5:1. This value
     clears 4.9:1 on --surface-subtle and 5.2:1 on white. */
  --text-tertiary: #676C7C;
  --text-inverse: var(--white);
  --text-inverse-secondary: rgba(255, 255, 255, .66);
  --text-accent: var(--blue-600);

  --surface-page: var(--white);
  --surface-subtle: var(--ink-050);
  --surface-card: var(--white);
  --surface-card-hover: var(--white);
  --surface-inverse: var(--ink-900);
  --surface-inverse-raised: #1A1D24;
  --surface-accent-soft: var(--blue-050);
  --surface-scrim: rgba(14, 16, 20, .55);

  --line-hairline: var(--ink-150);
  --line-strong: var(--ink-200);
  --line-inverse: rgba(255, 255, 255, .14);
  --line-inverse-strong: rgba(255, 255, 255, .28);
  --line-accent: var(--blue-600);
  --line-heavy: var(--ink-900);

  --action-solid-bg: var(--ink-900);
  --action-solid-bg-hover: var(--ink-700);
  --action-solid-fg: var(--white);
  --action-accent-bg: var(--blue-600);
  --action-accent-bg-hover: var(--blue-700);
  --action-accent-fg: var(--white);
  --action-ghost-bg-hover: var(--ink-050);
  --focus-ring: var(--blue-600);
  --state-disabled-fg: var(--ink-300);
  --state-disabled-bg: var(--ink-100);
  --selection-bg: var(--blue-100);

  --glass-border: rgba(14, 16, 20, .10);
  --glass-highlight: rgba(255, 255, 255, .92);
  --glass-fill: linear-gradient(152deg, rgba(20, 28, 50, .05), rgba(20, 28, 50, .018) 55%, rgba(39, 69, 201, .05));

  --shadow-sm: 0 1px 2px rgba(14, 16, 20, .05);
  --shadow-md: 0 1px 2px rgba(14, 16, 20, .04), 0 10px 28px rgba(14, 16, 20, .07);
  --shadow-lg: 0 2px 4px rgba(14, 16, 20, .04), 0 24px 60px rgba(14, 16, 20, .10);
  --shadow-glass: 0 20px 60px rgba(14, 16, 20, .10), inset 0 1px 0 rgba(255, 255, 255, .60);
  --glow-under: 0 40px 120px -30px rgba(39, 69, 201, .26);
  --glow-accent: 0 0 0 1px rgba(39, 69, 201, .18), 0 18px 50px -20px rgba(39, 69, 201, .28);

  --aurora-1: rgba(39, 69, 201, .07);
  --aurora-2: rgba(39, 69, 201, .05);
  --aurora-3: rgba(39, 69, 201, .045);

  --nav-bg: rgba(255, 255, 255, .82);
  --nav-bg-scrolled: rgba(255, 255, 255, .93);

  --positive: #1F6B4A;
  --caution: #8A6A18;
  --negative: #93321F;
}

/* --------------------------------------------------- 5. Typographic scale */
:root {
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Display — Manrope, tight tracking, headline duty. Fluid: no breakpoint
     overrides needed, which is what killed the old !important cascade. */
  --type-display-xl-size: clamp(2.75rem, 8.4vw, 6rem);
  --type-display-xl-line: 0.98;
  --type-display-xl-track: -0.035em;
  --type-display-l-size: clamp(2.375rem, 6.6vw, 4.5rem);
  --type-display-l-line: 1.02;
  --type-display-l-track: -0.032em;
  --type-display-m-size: clamp(1.875rem, 4.8vw, 3.5rem);
  --type-display-m-line: 1.06;
  --type-display-m-track: -0.028em;

  /* Headings */
  --type-h1-size: clamp(1.875rem, 3.9vw, 2.75rem);
  --type-h1-line: 1.12;
  --type-h1-track: -0.024em;
  --type-h2-size: clamp(1.625rem, 3.1vw, 2.125rem);
  --type-h2-line: 1.18;
  --type-h2-track: -0.020em;
  --type-h3-size: clamp(1.3125rem, 2.2vw, 1.625rem);
  --type-h3-line: 1.26;
  --type-h3-track: -0.014em;
  --type-h4-size: clamp(1.125rem, 1.5vw, 1.25rem);
  --type-h4-line: 1.36;
  --type-h4-track: -0.010em;

  /* Body — Golos Text */
  --type-body-lg-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
  --type-body-lg-line: 1.60;
  --type-body-lg-track: -0.004em;
  --type-body-size: 1.03125rem;
  --type-body-line: 1.66;
  --type-body-track: 0em;
  --type-body-sm-size: 0.9375rem;
  --type-body-sm-line: 1.60;
  --type-body-sm-track: 0em;
  --type-caption-size: 0.8125rem;
  --type-caption-line: 1.50;
  --type-caption-track: 0.002em;

  /* Utility */
  --type-overline-size: 0.75rem;
  --type-overline-line: 1.20;
  --type-overline-track: 0.14em;
  --type-mono-size: 0.8125rem;
  --type-mono-line: 1.50;
  --type-mono-track: 0.02em;
  --type-numeral-size: clamp(2.5rem, 6vw, 4rem);
  --type-numeral-line: 1.00;
  --type-numeral-track: -0.03em;
}

/* ---------------------------------------------------------- 6. Space & layout */
:root {
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 128px;
  --space-13: 160px;
  --space-14: 200px;

  /* Section rhythm scales with the viewport instead of snapping at 900px. */
  --section-y: clamp(4.5rem, 10vw, 10rem);
  --section-y-compact: clamp(3.5rem, 7.5vw, 6rem);
  --block-gap: clamp(3rem, 6vw, 6rem);
  --grid-gap: clamp(1.75rem, 3vw, 2.5rem);

  --stack-tight: var(--space-3);
  --stack: var(--space-5);
  --stack-loose: var(--space-8);

  --grid-columns: 12;
  --grid-gutter: clamp(1rem, 2.4vw, 2rem);
  --page-max: 1320px;
  --page-margin: clamp(1.25rem, 4.4vw, 4rem);

  --measure-short: 34ch;
  --measure: 62ch;
  --measure-long: 76ch;

  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --border-hairline: 1px;
  --rule-thick: 2px;

  /* Breakpoints are documentation only — media queries need literals. */
  --bp-sm: 640px;
  --bp-md: 900px;
  --bp-lg: 1200px;
  --bp-xl: 1440px;

  --nav-h: 84px;
}

@media (max-width: 900px) {
  :root { --nav-h: 68px; }
}

/* --------------------------------------------------------------- 7. Motion */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-entrance: cubic-bezier(.16, 1, .30, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
  --dur-reveal: 760ms;
  --dur-ambient: 24s;

  --reveal-stagger: 70ms;
  --reveal-distance: 22px;

  --transition-ui:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
    --reveal-stagger: 0ms;
    --reveal-distance: 0px;
  }
}