/* ============================================================
   ДЕЛО ЗАКРЫТО · дизайн-токены
   Единственный источник значений для лендинга и игрового UI.
   Hex-фолбэки объявлены первыми; @supports переопределяет OKLCH.
   Контраст всех текстовых пар проверен численно (см. DESIGN.md §1).
   ============================================================ */

:root {
  /* ---------- Шрифтовые стеки (self-host, кириллица) ---------- */
  --font-display: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-ui: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", ui-monospace, monospace;

  /* ---------- Типо-шкала: общая fluid-ось 360px → 2560px ----------
     clamp(min, vw + rem, max): rem-слагаемое обязательно (WCAG 1.4.4,
     браузерный zoom и пользовательский базовый размер работают).
     Пол любого текста = 14px (--fs-xs); размеров 12–13px больше нет.
     Игра и лендинг едут по одной шкале (TYPO-SPEC.md §1). */
  --fs-xs: clamp(0.875rem, 0.18vw + 0.834rem, 1.125rem);   /* 14→18 · моно-штампы, таймкоды */
  --fs-sm: clamp(0.9375rem, 0.18vw + 0.897rem, 1.1875rem); /* 15→19 · вторичный UI-текст */
  --fs-base: clamp(1rem, 0.23vw + 0.949rem, 1.3125rem);    /* 16→21 · основной UI */
  --fs-md: clamp(1.125rem, 0.27vw + 1.064rem, 1.5rem);     /* 18→24 · заголовки панелей */
  --fs-lg: clamp(1.375rem, 0.36vw + 1.293rem, 1.875rem);   /* 22→30 · имя в модалке допроса */
  --fs-xl: clamp(1.625rem, 0.45vw + 1.523rem, 2.25rem);    /* 26→36 · заголовок экрана */

  /* Лендинг: display-токены (единый гротеск IBM Plex Sans) */
  --fs-body: clamp(1.0625rem, 0.23vw + 1.011rem, 1.375rem); /* 17→22 · body лендинга */
  --fs-h3: clamp(1.25rem, 0.27vw + 1.189rem, 1.625rem);     /* 20→26 · UI-гротеск 600 */
  --fs-h2: clamp(2rem, 1.09vw + 1.755rem, 3.5rem);          /* 32→56 */
  --fs-hero: clamp(2.75rem, 2.18vw + 2.259rem, 5.75rem);    /* 44→92 · на 1920 даёт прежние 78 */

  /* ---------- Line-height по ролям ---------- */
  --lh-display: 1.1;  /* old-style антиква дышит; 1.05 резал выносные */
  --lh-heading: 1.2;  /* fs-md/lg/xl заголовки панелей и экранов, h3 */
  --lh-ui: 1.4;       /* однострочные/короткие UI-строки, лейблы, мета */
  --lh-body: 1.55;    /* многострочный текст игры: реплики, описания (<60ch) */
  --lh-prose: 1.65;   /* body лендинга, doc-sheet-документы (WCAG 1.4.12 ≥1.5) */
  --ls-display: 0; /* гротеск с широкой кириллицей Ж/Ш/Щ/М — не зажимать */
  --ls-stamp: 0.06em; /* моно-штампы капсом (Plex Mono 700) */

  /* ---------- Цвет: hex-фолбэки ---------- */
  --bg-deep: #0c0806;
  --bg-night: #130e0a;
  --surface: #1d1712;
  --surface-2: #27201a;
  --line: #3f362d;

  --ink: #ede7db;
  --ink-mute: #b9b0a2;
  --ink-faint: #877f73;  /* только large-text ≥18px и disabled */
  --ink-dark: #151107;   /* текст на фосфорных заливках и doc-sheet */

  --phosphor: #bbd23c;
  --phosphor-hover: #c8df53;
  --phosphor-dim: #97a941;
  --phosphor-dark: #364010;

  --danger: #f0574e;
  --danger-text: #fb8371;
  --danger-dark: #521613;

  --doc-sheet: #e3decf;  /* диегетическая машинописная страница, НЕ фон страницы */

  --backdrop: rgb(8 5 4 / 0.72);

  /* ---------- Семантические алиасы ---------- */
  --color-accent: var(--phosphor);
  --color-accent-contrast: var(--ink-dark);
  --color-truth: var(--phosphor-dim);   /* подтверждённый факт */
  --color-lie: var(--danger);           /* вскрытое алиби, ложь */
  --color-lie-text: var(--danger-text);
  --color-unseen: var(--phosphor);      /* точка «непросмотрено» */

  /* ---------- Spacing (база 4px) ---------- */
  --space-05: 0.125rem; /*  2 */
  --space-1: 0.25rem;   /*  4 */
  --space-2: 0.5rem;    /*  8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --section-gap: clamp(4rem, 10vh, 8rem); /* ритм секций лендинга */

  --container-wide: 80rem;  /* 1280 · модальное значение индустрии */
  --container-pad: clamp(1.5rem, 1.5vw + 1.1rem, 2.5rem); /* 24 мобила → 40 с ~1500px */
  --container-prose: 70ch;  /* колонка растёт вместе с fluid body, CPL 65–75 */
  --dossier-panel-w: clamp(21.25rem, 2.73vw + 20.64rem, 25rem); /* 340→400 · панель досье */

  /* ---------- Компонентные размеры (fluid, TYPO-SPEC.md §4) ---------- */
  --btn-h: clamp(2.75rem, 0.36vw + 2.668rem, 3.25rem);         /* 44→52 · тач + ТВ */
  --btn-h-compact: clamp(2.25rem, 0.18vw + 2.209rem, 2.5rem);  /* 36→40 */
  --btn-h-lg: clamp(3.25rem, 0.36vw + 3.168rem, 3.75rem);      /* 52→60 · CTA лендинга */
  --chip-h: clamp(1.75rem, 0.27vw + 1.689rem, 2.125rem);       /* 28→34 · status-чипы */
  --pin-size: clamp(2.25rem, 0.36vw + 2.168rem, 2.75rem);      /* 36→44 · пины карты */

  /* ---------- Радиусы (Shape Lock, max 14) ---------- */
  --radius-xs: 2px;  /* фото улик, плёнки, doc-sheet */
  --radius-sm: 6px;  /* кнопки, инпуты, бейджи */
  --radius-md: 10px; /* карточки, тосты, панели */
  --radius-lg: 14px; /* модалки */

  /* ---------- Тени и свечение ---------- */
  --shadow-raise: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 16px rgb(0 0 0 / 0.35);
  --shadow-modal: 0 4px 12px rgb(0 0 0 / 0.5), 0 24px 64px rgb(0 0 0 / 0.55);
  --glow-phosphor: 0 0 24px rgb(187 210 60 / 0.14); /* только: focus, тост улики, hero */
  --ring: 0 0 0 2px var(--bg-night), 0 0 0 4px var(--phosphor);

  /* ---------- Z-шкала (семантическая) ---------- */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
  --z-grain: 700;

  /* ---------- Motion ---------- */
  --duration-press: 150ms; /* нажатия, hover */
  --duration-fast: 200ms;  /* дропдауны, тултипы, любые exit */
  --duration-base: 300ms;  /* тосты, раскрытия, панорама карты */
  --duration-slow: 400ms;  /* модалки, hero лендинга (потолок) */

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1); /* только вход модалок; JS: spring {duration:.45, bounce:.18} */

  --stagger-step: 40ms; /* список улик, cap 8 шагов */
  --travel-y: 8px;      /* дистанция входа снизу */
  --travel-scale: 0.96; /* стартовый scale входов (не 0!) */

  /* ---------- Прочее ---------- */
  --grain-opacity: 0.035; /* зерно: fixed, pointer-events:none, z-grain */
  --focus-outline-offset: 2px;
}

/* ---------- OKLCH поверх фолбэков ---------- */
@supports (color: oklch(50% 0.1 120)) {
  :root {
    --bg-deep: oklch(0.14 0.01 60);
    --bg-night: oklch(0.17 0.012 60);
    --surface: oklch(0.21 0.014 62);
    --surface-2: oklch(0.25 0.016 64);
    --line: oklch(0.34 0.02 68);

    --ink: oklch(0.93 0.018 85);
    --ink-mute: oklch(0.76 0.022 80);
    --ink-faint: oklch(0.6 0.02 75);
    --ink-dark: oklch(0.18 0.02 90);

    --phosphor: oklch(0.82 0.17 118);
    --phosphor-hover: oklch(0.86 0.165 118);
    --phosphor-dim: oklch(0.7 0.13 118);
    --phosphor-dark: oklch(0.35 0.07 120);

    --danger: oklch(0.66 0.19 27);
    --danger-text: oklch(0.74 0.15 30);
    --danger-dark: oklch(0.3 0.09 27);

    --doc-sheet: oklch(0.9 0.02 90);
    --glow-phosphor: 0 0 24px oklch(0.82 0.17 118 / 0.14);
  }
}

/* ---------- Reduced motion: обнуляем перемещение, оставляем fade ----------
   Компоненты дополнительно убирают scale/parallax/grain-анимации.
   Opacity-переходы сохраняются: reduce = меньше движения, не мигание. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --travel-y: 0px;
    --travel-scale: 1;
    --stagger-step: 0ms;
    --ease-spring: cubic-bezier(0.25, 1, 0.5, 1);
    --duration-slow: 200ms;
    --duration-base: 150ms;
  }
}