/* ═══════════════════════════════════════════════════════════════════
   DISTIL · DESIGN TOKENS · v2.0
   Единый источник правды для лендинга И приложения.
   Канон: concepts/brand/tokens.css — этот файл его копия для автономной
   сборки лендинга. Меняешь здесь → синхронизируй туда (или наоборот).

   Правила:
   · компоненты используют ТОЛЬКО семантические токены (--bg, --fg, --accent…)
   · сырые палитры (--d-*, --l-*) не трогать в компонентах — они переключаются темой
   · тёмная тема по умолчанию: продукт тёмный, лендинг тёмный
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── Сырая палитра · тёмная ─────────────────────────────────────── */
  --d-bg:#100E0E;                 /* тёплый почти-чёрный, фон страницы и окна */
  --d-surface:#171514;            /* приподнятая поверхность: панели, демо-фон */
  --d-surface-2:#1D1A19;          /* карточки, поля ввода */
  --d-surface-3:#242120;          /* hover карточек, активный пункт */
  --d-fg:#FDFFF0;                 /* кремово-белый текст (не #fff) */
  --d-fg-2:#D8D7CD;               /* текст второго уровня */
  --d-muted:#AAA9A2;              /* вторичный текст · 8.0:1 на --d-bg */
  --d-faint:#85847D;              /* подписи, метки · 4.5:1 на --d-bg, от 11px */
  --d-border:rgba(253,255,240,.12);
  --d-border-strong:rgba(253,255,240,.22);
  --d-accent:#46C6AC;             /* тил-сигнал · 9.3:1 на --d-bg */
  --d-accent-deep:#2FA391;
  --d-accent-soft:rgba(70,198,172,.14);
  --d-signal:#F2724E;             /* коралл: ТОЛЬКО запись, ошибка, живой индикатор */
  --d-signal-soft:rgba(242,114,78,.14);
  --d-success:#4FA487;

  /* ── Сырая палитра · светлая (документы, кабинет, печать) ────────── */
  --l-bg:#ECE9E1;
  --l-surface:#F4F2EB;
  --l-surface-2:#FFFFFF;
  --l-surface-3:#E4E0D6;
  --l-fg:#15120C;
  --l-fg-2:#39352C;
  --l-muted:#5C574C;
  --l-faint:#6A6456;
  --l-border:#D5D0C3;
  --l-border-strong:#C3BDAD;
  --l-accent:#14705E;             /* тил на светлом · 4.9:1 на --l-bg (AA для текста) */
  --l-accent-deep:#0F5A4B;        /* 6.5:1 на --l-bg */
  --l-accent-soft:rgba(20,112,94,.12);
  --l-signal:#AF3B1B;             /* коралл затемнён под светлый фон · 5.0:1 */
  --l-signal-soft:rgba(175,59,27,.12);
  --l-success:#256A53;            /* 5.3:1 на --l-bg */

  /* ── Семантические (это и используют компоненты) ─────────────────── */
  --bg:var(--d-bg);
  --surface:var(--d-surface);
  --surface-2:var(--d-surface-2);
  --surface-3:var(--d-surface-3);
  --fg:var(--d-fg);
  --fg-2:var(--d-fg-2);
  --muted:var(--d-muted);
  --faint:var(--d-faint);
  --border:var(--d-border);
  --border-strong:var(--d-border-strong);
  --accent:var(--d-accent);
  --accent-deep:var(--d-accent-deep);
  --accent-soft:var(--d-accent-soft);
  --signal:var(--d-signal);
  --signal-soft:var(--d-signal-soft);
  --success:var(--d-success);
  --on-accent:#100E0E;            /* текст на тил-заливке */
  --on-fg:#100E0E;                /* текст на кремовой заливке (primary-кнопка) */

  /* ── Шрифты ──────────────────────────────────────────────────────── */
  --font-display:"Literata","Iowan Old Style","Palatino Linotype",Charter,Georgia,serif;
  --font-body:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* ── Тип-шкала (px на десктопе → clamp где нужно) ────────────────── */
  --text-2xs:11px;                /* нижний порог для моно-меток */
  --text-xs:11px;
  --text-sm:13px;
  --text-base:16px;
  --text-md:clamp(17px,1.5vw,21px);        /* .lead */
  --text-lg:clamp(20px,2vw,28px);          /* h3 */
  --text-xl:clamp(28px,3.4vw,44px);        /* h2 в приложении / малый h2 */
  --text-2xl:clamp(42px,6.2vw,92px);       /* h2 лендинга */
  --text-display:clamp(62px,8.6vw,132px);  /* h1 лендинга */

  --leading-display:.95;
  --leading-tight:1.08;
  --leading-snug:1.15;
  --leading-body:1.5;
  --leading-relaxed:1.65;

  --tracking-display:-.045em;
  --tracking-heading:-.025em;
  --tracking-body:0;
  --tracking-caps:.13em;

  /* ── Отступы (кратны 4) ──────────────────────────────────────────── */
  --space-1:4px;  --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:20px; --space-6:24px;  --space-7:32px;  --space-8:40px;
  --space-9:48px; --space-10:64px; --space-11:96px; --space-12:150px;

  /* ── Радиусы ─────────────────────────────────────────────────────── */
  --radius-xs:4px;
  --radius-sm:7px;
  --radius-md:10px;
  --radius-lg:14px;
  --radius-xl:20px;
  --radius-2xl:22px;
  --radius-pill:999px;

  /* ── Тени (только на тёмном; на светлом — мягче через тему) ──────── */
  --shadow-btn:0 12px 36px rgba(0,0,0,.30);
  --shadow-card:0 35px 90px rgba(0,0,0,.35);
  --shadow-window:0 55px 120px rgba(0,0,0,.62);
  --shadow-rail:0 22px 55px rgba(0,0,0,.38);

  /* ── Движение ────────────────────────────────────────────────────── */
  --ease:cubic-bezier(.22,1,.36,1);        /* единственная кривая бренда */
  --dur-fast:150ms;
  --dur-base:250ms;
  --dur-slow:800ms;

  /* ── Фокус ───────────────────────────────────────────────────────── */
  --focus-ring:0 0 0 4px var(--accent-soft);
  --focus-outline:2px solid var(--accent);

  /* ── Размеры и сетка ─────────────────────────────────────────────── */
  --control-h:48px;
  --control-h-sm:42px;
  --control-h-xs:36px;
  --nav-h:72px;
  --wrap:1440px;
  --pad:clamp(20px,4.4vw,72px);
  --guide:rgba(242,114,78,.22);            /* пунктирная направляющая героя */
}

/* ── Светлая тема ───────────────────────────────────────────────────── */
[data-theme="light"]{
  --bg:var(--l-bg);
  --surface:var(--l-surface);
  --surface-2:var(--l-surface-2);
  --surface-3:var(--l-surface-3);
  --fg:var(--l-fg);
  --fg-2:var(--l-fg-2);
  --muted:var(--l-muted);
  --faint:var(--l-faint);
  --border:var(--l-border);
  --border-strong:var(--l-border-strong);
  --accent:var(--l-accent);
  --accent-deep:var(--l-accent-deep);
  --accent-soft:var(--l-accent-soft);
  --signal:var(--l-signal);
  --signal-soft:var(--l-signal-soft);
  --success:var(--l-success);
  --on-accent:#FFFFFF;
  --on-fg:#ECE9E1;
  --shadow-btn:0 10px 28px rgba(21,18,12,.14);
  --shadow-card:0 24px 60px rgba(21,18,12,.14);
  --shadow-window:0 40px 90px rgba(21,18,12,.22);
  --shadow-rail:0 16px 40px rgba(21,18,12,.16);
  color-scheme:light;
}
:root,[data-theme="dark"]{color-scheme:dark}

/* Системная тема — только если явно попросили data-theme="auto" */
@media(prefers-color-scheme:light){
  [data-theme="auto"]{
    --bg:var(--l-bg);--surface:var(--l-surface);--surface-2:var(--l-surface-2);--surface-3:var(--l-surface-3);
    --fg:var(--l-fg);--fg-2:var(--l-fg-2);--muted:var(--l-muted);--faint:var(--l-faint);
    --border:var(--l-border);--border-strong:var(--l-border-strong);
    --accent:var(--l-accent);--accent-deep:var(--l-accent-deep);--accent-soft:var(--l-accent-soft);
    --signal:var(--l-signal);--signal-soft:var(--l-signal-soft);--success:var(--l-success);
    --on-accent:#FFFFFF;--on-fg:#ECE9E1;color-scheme:light;
  }
}