/* ==========================================================================
   GTA 6 Confirmed — design tokens (source of truth: design/tokens.css)
   Самостоятельный валидный CSS. Подключается одной заменой файла.

   Контракт (docs/00-brief.md, раздел 5) — имена менять нельзя:
     --color-bg  --color-surface  --color-text  --color-text-muted  --color-border
     --color-accent  --color-accent-contrast
     --color-status-confirmed  --color-status-partial  --color-status-unconfirmed
     --font-display  --font-body  --font-mono
     --radius-sm  --radius-md  --radius-lg

   Всё остальное — дополнительные токены дизайн-системы. Там, где у Tailwind 4
   есть пространство имён (@theme: --text-*, --leading-*, --tracking-*,
   --font-weight-*, --spacing-*, --ease-*, --breakpoint-*, --container-*),
   использовано оно.

   Темы:
     светлая — по умолчанию;
     тёмная  — по системной настройке (prefers-color-scheme),
               либо принудительно: <html data-theme="dark">;
     <html data-theme="light"> принудительно включает светлую.

   Шрифтовые файлы и @font-face лежат отдельно в fonts.css: здесь только стеки,
   поэтому файл не зависит от путей.

   Палитра «Леонида» (2026-11-13). Мотивы — побережье штата, а не фирменный стиль:
     светлая — день: песок и бумага, тушь цвета мангровой тени, ссылки и кнопки
               цвета глубокой лагуны; пастель ар-деко только в подложках статусов
               (мята, соломка сахарного тростника, известняк);
     тёмная  — ночь на воде: сине-зелёный «ночной залив», действие — светлая
               вода (#86D1E7), фокус — неон.
   Неон один, циановый: плашка знака и выделение текста, в тёмной теме ещё
   кольцо фокуса. Больше он нигде не появляется, чтобы оставаться «вывеской».
   Розового, фиолетового, оранжево-красного и градиентов «заката» в этой палитре
   нет. Сайт с 2026-11-13 выпускается в скине «Vice» (variants/vice.css), который
   переопределяет цвета и радиусы ниже; эти значения видны только в сборке
   SITE_DESIGN=classic и служат основой для остальных скинов.
   Статусы: зелёный мангров / янтарь тростника / серый сланец. Подобраны так,
   чтобы при протанопии и дейтеранопии расходиться не хуже прежней палитры
   (ΔE OKLab: светлая ≥ 7.8, тёмная ≥ 9.0); форма и подпись статуса — как раньше.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Контракт: цвет ---------------------------------------------------- */
  --color-bg: #F3EDE1;                 /* «песок и бумага»: фон страницы */
  --color-surface: #FFFCF6;            /* карточки, блок ответа, поля ввода */
  --color-text: #10211F;               /* «тушь»: тень мангров; 14.3:1 на bg */
  --color-text-muted: #4A5B57;         /* вторичный текст, мета; 6.2:1 на bg */
  --color-border: #D9CFBC;             /* волосяные разделители (декор) */
  --color-accent: #0F5C6F;             /* глубокая лагуна: кнопки, ссылки; 6.5:1 на bg */
  --color-accent-contrast: #FFFCF6;    /* текст на акценте; 7.4:1 */
  --color-status-confirmed: #2B7351;   /* мангров; годится как текст на bg/surface (>= 4.5:1) */
  --color-status-partial: #8A5200;     /* тростниковый янтарь */
  --color-status-unconfirmed: #454B53; /* сланец */

  /* ---- Дополнительно: цвет ---------------------------------------------- */
  --color-surface-sunken: #E8E0CF;     /* мокрый песок: hover кнопок-значков, рекламный слот */
  --color-border-strong: #6F7C77;      /* границы контролов; >= 3:1 на bg, surface, sunken */
  --color-rule: #10211F;               /* жирные «линейки» и рамка блока ответа */
  --color-focus: #0F5C6F;              /* кольцо фокуса = лагуна; 6.5:1 на bg */
  --color-neon: #40D1F7;               /* единственный неон: плашка знака, выделение текста */
  --color-neon-contrast: #10211F;      /* текст на неоне; 9.3:1 */
  --color-status-confirmed-surface: #DCEFE3;    /* подложка под статус: пастель ар-деко */
  --color-status-partial-surface: #F6E3B4;
  --color-status-unconfirmed-surface: #E3E3DF;
  --color-status-confirmed-fill: #2B7351;       /* графика: шкала, значок; >= 3:1 */
  --color-status-partial-fill: #AD6A00;
  --color-status-unconfirmed-fill: #454B53;

  /* ---- Контракт: шрифты -------------------------------------------------- */
  --font-display: "Sofia Sans Condensed", "Sofia Sans Condensed Fallback", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Golos Text", "Golos Text Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* ---- Контракт: радиусы ------------------------------------------------- */
  --radius-sm: 2px;                    /* бейджи, метки, чипы */
  --radius-md: 4px;                    /* кнопки, поля, карточки */
  --radius-lg: 8px;                    /* блок ответа, крупные панели */
  --radius-full: 999px;                /* только круглые значки */

  /* ---- Кегли (пространство имён Tailwind --text-*) ---------------------- */
  --text-xs: 0.75rem;                  /* 12 — подписи капсом, моно-мета */
  --text-xs--line-height: 1.35;
  --text-sm: 0.875rem;                 /* 14 — мета, крошки, подвал */
  --text-sm--line-height: 1.45;
  --text-base: 1rem;                   /* 16 — интерфейс */
  --text-base--line-height: 1.5;
  --text-lg: 1.125rem;                 /* 18 — основной текст ответа и статьи */
  --text-lg--line-height: 1.55;
  --text-xl: 1.375rem;                 /* 22 — заголовок карточки (display) */
  --text-xl--line-height: 1.15;
  --text-2xl: clamp(1.375rem, 1.24rem + 0.6vw, 1.625rem);   /* 22–26 — первая фраза ответа */
  --text-2xl--line-height: 1.25;
  --text-3xl: clamp(1.625rem, 1.42rem + 0.9vw, 2.125rem);   /* 26–34 — H2 (display) */
  --text-3xl--line-height: 1.1;
  --text-4xl: clamp(2.125rem, 1.6rem + 2.3vw, 3.5rem);      /* 34–56 — H1 вопроса (display) */
  --text-4xl--line-height: 1.02;
  --text-5xl: clamp(2.75rem, 1.7rem + 4.6vw, 5.5rem);       /* 44–88 — заголовок главной */
  --text-5xl--line-height: 0.95;

  --leading-display: 1.05;             /* свои имена: не переопределяют tight/snug/normal из Tailwind */
  --leading-heading: 1.25;
  --leading-body: 1.55;

  --tracking-display: -0.01em;         /* крупный display чуть плотнее */
  --tracking-label: 0.06em;            /* капс-метки */
  --tracking-mono: 0;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ---- Отступы: сетка 4px (значения совпадают со шкалой Tailwind) -------- */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --spacing-gutter: clamp(1rem, 0.5rem + 2.2vw, 2rem);      /* поля страницы: 16 → 32 */
  --spacing-section: clamp(2.5rem, 1.6rem + 4vw, 5rem);     /* между секциями: 40 → 80 */
  --spacing-tap: 2.75rem;                                   /* 44px — минимальная цель касания */

  /* ---- Сетка и контейнеры ------------------------------------------------ */
  --breakpoint-sm: 40rem;              /* 640 — значения совпадают с Tailwind по умолчанию */
  --breakpoint-md: 48rem;              /* 768 */
  --breakpoint-lg: 64rem;              /* 1024 — появляется боковая колонка */
  --breakpoint-xl: 80rem;              /* 1280 */
  --container-page: 72rem;             /* 1152 — максимум страницы */
  --container-prose: 45.5rem;          /* 728 — колонка чтения; равна ширине баннера 728×90 */
  --container-rail: 18.75rem;          /* 300 — боковая колонка под рекламу */

  /* ---- Линии и тени ------------------------------------------------------ */
  --border-hair: 1px;
  --border-rule: 2px;
  --shadow-none: none;                 /* система без теней: иерархию держат линии */
  --shadow-pop: 0 0 0 1px var(--color-rule), 4px 4px 0 0 var(--color-rule);   /* только всплывающая выдача поиска */

  /* ---- Штриховка «не подтверждено» -------------------------------------- */
  --pattern-hatch: repeating-linear-gradient(135deg, currentColor 0 1.5px, transparent 1.5px 6px);

  /* ---- Рекламные слоты: высота резервируется заранее -------------------- */
  --ad-label-height: 1.5rem;           /* строка «Реклама» над слотом */
  --ad-height-inline: 250px;           /* 300×250, в потоке на мобильном */
  --ad-height-banner: 100px;           /* 320×100, мобильный баннер */
  --ad-height-leaderboard: 90px;       /* 728×90, с 768px */
  --ad-height-rail: 600px;             /* 300×600, боковая колонка с 1024px */

  /* ---- Движение ---------------------------------------------------------- */
  --duration-fast: 120ms;              /* hover, нажатие */
  --duration-base: 180ms;              /* раскрытие меню, смена темы */
  --duration-slow: 320ms;              /* единственное «входное» движение: шкала статуса */
  --ease-ui: cubic-bezier(0.2, 0.7, 0.2, 1);   /* одна кривая на всё; своё имя, чтобы не подменять ease-out из Tailwind */

  /* ---- Слои -------------------------------------------------------------- */
  --z-base: 0;
  --z-header: 20;
  --z-popover: 30;
  --z-skiplink: 50;
}

/* Тёмная тема: системная настройка (если тема не зафиксирована атрибутом) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: #0A1716;
    --color-surface: #11211F;
    --color-text: #E8F0EC;
    --color-text-muted: #9DB1AB;
    --color-border: #22342F;
    --color-accent: #86D1E7;              /* вода под неоном: ссылки, кнопки; 10.7:1 */
    --color-accent-contrast: #0A1716;
    --color-status-confirmed: #75DF8F;
    --color-status-partial: #E7AC2A;
    --color-status-unconfirmed: #A9B4BD;

    --color-surface-sunken: #06100F;
    --color-border-strong: #678079;
    --color-rule: #E8F0EC;
    --color-focus: #40D1F7;
    --color-neon: #40D1F7;
    --color-neon-contrast: #0A1716;
    --color-status-confirmed-surface: #12291D;
    --color-status-partial-surface: #2C2310;
    --color-status-unconfirmed-surface: #1D2528;
    --color-status-confirmed-fill: #75DF8F;
    --color-status-partial-fill: #E7AC2A;
    --color-status-unconfirmed-fill: #A9B4BD;
  }
}

/* Тёмная тема: принудительно */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0A1716;
  --color-surface: #11211F;
  --color-text: #E8F0EC;
  --color-text-muted: #9DB1AB;
  --color-border: #22342F;
  --color-accent: #86D1E7;              /* вода под неоном: ссылки, кнопки; 10.7:1 */
  --color-accent-contrast: #0A1716;
  --color-status-confirmed: #75DF8F;
  --color-status-partial: #E7AC2A;
  --color-status-unconfirmed: #A9B4BD;

  --color-surface-sunken: #06100F;
  --color-border-strong: #678079;
  --color-rule: #E8F0EC;
  --color-focus: #40D1F7;
  --color-neon: #40D1F7;
  --color-neon-contrast: #0A1716;
  --color-status-confirmed-surface: #12291D;
  --color-status-partial-surface: #2C2310;
  --color-status-unconfirmed-surface: #1D2528;
  --color-status-confirmed-fill: #75DF8F;
  --color-status-partial-fill: #E7AC2A;
  --color-status-unconfirmed-fill: #A9B4BD;
}

/* Меньше движения: длительности обнуляются на уровне токенов */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-base: 0.01ms;
    --duration-slow: 0.01ms;
  }
}