/* ─────────────────────────────────────────────────────────────────────────
   ДИЗАЙН-СИСТЕМА «ПЕЧАТНЫЙ ДОМ» — единственный слой вида.
   Направление C «Бумага и свет»: тёплая бумажно-льняная пастель, природные
   приглушённые тона, тихий латунный акцент, чернильная кнопка. Spectral + Hanken
   Grotesk + IBM Plex Mono. Компоненты ссылаются ТОЛЬКО на эти токены.
   Базовая тема — СВЕТЛАЯ (бумага). Тёмная — переопределением на [data-theme=dark].
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* — типографика — */
  --font-serif: "Spectral", Georgia, "Times New Roman", serif;
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --fs-display:40px; --fs-h1:32px; --fs-h2:26px; --fs-h3:20px; --fs-h4:16px;
  --fs-body:15px; --fs-small:13px; --fs-caption:12px; --fs-overline:10px;
  --fs-data:14px; --fs-mono:13px;
  --lh-tight:1.06; --lh-snug:1.2; --lh-normal:1.55;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --tracking-tight:-0.01em; --tracking-overline:0.16em; --tracking-caption:0.01em;

  /* — пространство (4px) — */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;

  /* — радиусы (мягкие, бумажные) — */
  --radius-xs:7px; --radius-sm:10px; --radius-md:14px; --radius-lg:16px; --radius-pill:999px;

  /* — тени (тёплые, мягкие) — */
  --shadow-sm:0 1px 2px rgba(80,64,46,.12);
  --shadow-md:0 10px 24px -12px rgba(80,64,46,.30);
  --shadow-lg:0 24px 50px -28px rgba(74,60,44,.42);

  /* — z-слои — */
  --z-base:0; --z-sticky:100; --z-nav:200; --z-modal:1000; --z-toast:1100; --z-fullscreen:1200;

  /* — анимация — */
  --dur-press:130ms; --dur-fast:160ms; --dur-base:200ms; --dur-slow:300ms;
  /* сильные кривые (по emil): встроенные ease-* слишком вялые для UI */
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(.23,1,.32,1);      /* вход/отклик — резкий старт, мягкое торможение */
  --ease-in-out:cubic-bezier(.77,0,.175,1);  /* движение/морфинг на экране */

  /* — тач-таргеты — */
  --tap-min:48px; --tap-lg:60px;

  /* — контейнеры — */
  --container-md:960px; --container-lg:1280px;

  /* экран кодов на ПВЗ — всегда бумажно-белый, вне темы */
  --code-screen-bg:#FCFAF6; --code-screen-ink:#2A241D;
}

/* ───── СВЕТЛАЯ (базовая): бумага + чернила + латунь ───── */
:root, :root[data-theme="light"] {
  --color-bg:           #E7E3DC;  /* тёплая бумага (с градиентом в body) */
  --color-surface:      #FCFAF6;  /* лист */
  --color-surface-2:    #F1ECE3;  /* sunken: секции, шапки таблиц, сегмент */
  --color-surface-3:    #F7F2EA;  /* hover строк/пунктов */
  --color-border:       #EAE0D2;  /* hairline */
  --color-border-strong:#D8CBB4;
  --color-text:         #2A241D;
  --color-text-muted:   #5E564B;  /* secondary */
  --color-text-faint:   #9B9082;  /* muted */
  --color-link:         #6E5C44;  /* латунно-коричневые ссылки */
  --color-gold:         #B89B6E;  /* тихий латунный акцент: точки, кольца */
  --color-gold-strong:  #A98A5E;
  --color-accent:       #2C2620;  /* чернильная кнопка / активное */
  --color-accent-strong:#221D17;
  --color-accent-active:#1A1611;
  --color-accent-soft:  #F1ECE3;
  --color-on-accent:    #F4EEE4;  /* кремовый текст на чернилах */
  --color-good:#4F6B4A; --color-good-soft:#EAF0E8; --color-good-bd:#CFE0CF;
  --color-bad:#8A5A4A;  --color-bad-soft:#F4E5DF;  --color-bad-bd:#E6CFC6;
  --color-warn:#8A6D3B; --color-warn-soft:#F6EFDD; --color-warn-bd:#E4D2A8;
  --color-info:#5B5470; --color-info-soft:#ECE9F2; --color-info-bd:#D8D0E2;
  --focus-ring:0 0 0 3px rgba(184,155,110,.38);
  --skeleton-base:#F1ECE3; --skeleton-shine:#FCFAF6;
  --overlay:rgba(44,38,32,.45);
}

/* ───── ТЁМНАЯ: тёплый графит + латунь (опционально) ───── */
:root[data-theme="dark"] {
  --color-bg:           #1C1813;
  --color-surface:      #241F19;
  --color-surface-2:    #2A241D;
  --color-surface-3:    #322A20;
  --color-border:       #3A332B;
  --color-border-strong:#4A4236;
  --color-text:         #ECE4D8;
  --color-text-muted:   #B7AD9D;
  --color-text-faint:   #8A8072;
  --color-link:         #C9A875;
  --color-gold:         #C9A875;
  --color-gold-strong:  #D8B26A;
  --color-accent:       #C9A875;  /* латунь как акцент на тёмном */
  --color-accent-strong:#D8B26A;
  --color-accent-active:#E0C088;
  --color-accent-soft:  #322A20;
  --color-on-accent:    #1C1813;
  --color-good:#8FB088; --color-good-soft:#222A20; --color-good-bd:#384434;
  --color-bad:#C99A86;  --color-bad-soft:#2C201C;  --color-bad-bd:#48342E;
  --color-warn:#D0A45E; --color-warn-soft:#2A2418; --color-warn-bd:#46391F;
  --color-info:#9C92B4; --color-info-soft:#23202C; --color-info-bd:#3C374A;
  --focus-ring:0 0 0 3px rgba(201,168,117,.40);
  --skeleton-base:#2A241D; --skeleton-shine:#322A20;
  --overlay:rgba(0,0,0,.55);
}

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