/* ==========================================================================
   tokens.css — Дизайн-система «Тумблер»
   Единственный источник правды по визуалу (см. brand/design.md).
   Light по умолчанию + prefers-color-scheme:dark + ручной [data-theme].
   ========================================================================== */

/* --- Шрифты (self-host структура). Файлы кладём в assets/fonts/.
   Пока файлов нет — работает системный fallback-стек (ноль внешних CDN).
   Когда появятся woff2 — раскомментировать блоки ниже. --- */
/*
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:700 800;
  font-display:swap; src:url("fonts/Manrope-Variable.woff2") format("woff2");
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:400 600;
  font-display:swap; src:url("fonts/Inter-Variable.woff2") format("woff2");
}
*/

:root{
  /* — Типографика — */
  --font-display:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, Menlo, monospace;

  --fs-display:clamp(2.6rem, 6vw, 4.75rem);
  --fs-h2:clamp(1.9rem, 4vw, 3rem);
  --fs-h3:clamp(1.3rem, 2.4vw, 1.75rem);
  --fs-body:clamp(1rem, 1.05vw, 1.125rem);
  --fs-small:.875rem;

  /* — Радиусы — */
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:999px;

  /* — Шкала отступов (8pt) — */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  /* — Контейнер — */
  --maxw:1160px;
  --pad-x:clamp(20px, 5vw, 48px);

  /* — Движение — */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:150ms; --t-mid:240ms; --t-slow:420ms;

  /* — Акцент «сигнал ON» (не зависит от темы) — */
  --signal:#C6F24E;
  --signal-ink:#141600;
  --signal-dim:#9BC13A;
  --glow:rgba(198,242,78,.35);

  /* — Статусы (не зависят от темы) — */
  --calm:#3A6E7A;
  --ok:#4CAF6E;
  --warn:#E0A100;
  --off:#B84A3E;

  /* ===== LIGHT (по умолчанию) ===== */
  --ink:#12130F;
  --paper:#FBFBF7;
  --surface:#FFFFFF;
  --surface-2:#F4F5EE;
  --muted:#5C5F54;
  --line:#E4E5DC;

  --shadow-1:0 1px 2px rgba(18,19,15,.06);
  --shadow-2:0 8px 30px rgba(18,19,15,.10);

  /* инверсная (тёмная) секция на светлой теме */
  --inv-paper:#12130F;
  --inv-ink:#EDEFE7;
  --inv-surface:#1A1C14;
  --inv-muted:#A2A797;
  --inv-line:#2A2C22;

  color-scheme:light;
}

/* ===== DARK через системную настройку ===== */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#EDEFE7;
    --paper:#0E0F0C;
    --surface:#17190F;
    --surface-2:#1A1C14;
    --muted:#A2A797;
    --line:#2A2C22;

    --shadow-1:0 1px 2px rgba(0,0,0,.3);
    --shadow-2:0 10px 34px rgba(0,0,0,.45);

    /* в dark инверсная секция становится «светлой бумагой» */
    --inv-paper:#FBFBF7;
    --inv-ink:#12130F;
    --inv-surface:#FFFFFF;
    --inv-muted:#5C5F54;
    --inv-line:#E4E5DC;

    color-scheme:dark;
  }
}

/* ===== DARK через ручной переключатель (побеждает системную) ===== */
:root[data-theme="dark"]{
  --ink:#EDEFE7;
  --paper:#0E0F0C;
  --surface:#17190F;
  --surface-2:#1A1C14;
  --muted:#A2A797;
  --line:#2A2C22;

  --shadow-1:0 1px 2px rgba(0,0,0,.3);
  --shadow-2:0 10px 34px rgba(0,0,0,.45);

  --inv-paper:#FBFBF7;
  --inv-ink:#12130F;
  --inv-surface:#FFFFFF;
  --inv-muted:#5C5F54;
  --inv-line:#E4E5DC;

  color-scheme:dark;
}

/* ===== LIGHT принудительно (побеждает системную dark) ===== */
:root[data-theme="light"]{
  --ink:#12130F;
  --paper:#FBFBF7;
  --surface:#FFFFFF;
  --surface-2:#F4F5EE;
  --muted:#5C5F54;
  --line:#E4E5DC;

  --shadow-1:0 1px 2px rgba(18,19,15,.06);
  --shadow-2:0 8px 30px rgba(18,19,15,.10);

  --inv-paper:#12130F;
  --inv-ink:#EDEFE7;
  --inv-surface:#1A1C14;
  --inv-muted:#A2A797;
  --inv-line:#2A2C22;

  color-scheme:light;
}