/* Дизайн-токены витрины. Источник истины — DESIGN.md. Здесь только переменные:
   цветовые литералы допустимы лишь в этом файле. */

:root {
  color-scheme: light;

  /* Палитра (светлая тема — «кремовая бумага») */
  --color-canvas: #fdfbf9;
  --color-surface: #f7efe9;
  --color-ink: #171717;
  --color-heading: #2b1a07;
  --color-muted: #5c4d3c;
  --color-line: #171717;
  --color-line-soft: rgb(23 23 23 / 14%);
  --color-brand: #ff6f1e; /* заливки, полосы, подчёркивания — НЕ для текста */
  --color-accent-text: #b3430a; /* оранжевый для текста и ссылок (AA) */
  --color-focus: #b3430a;
  --color-on-accent: #171717; /* текст на заливках акцентов — одинаков в обеих темах */
  --color-brand-band: #ff6f1e;
  --color-on-brand-band: #171717;
  --color-mark-paper: #fdfbf9; /* кремовая заливка иконок рубрик — одинакова в обеих темах */
  --color-mark-letter: #fdfbf9; /* заливка «E» в знаке; в тёмной теме — тёмная, чтобы не сливалась с контуром */
  --color-selection: rgb(255 111 30 / 28%);

  /* Акценты рубрик: заливки бейджей/стикеров с тёмной обводкой, текст — --color-on-accent */
  --accent-interesting_words: #ff6f1e;
  --accent-famous_phrases: #e0564a;
  --accent-interesting_facts: #7fae5b;
  --accent-historical_figures: #f2b42d;
  --accent-guess_the_track: #c9709b;

  /* Шрифты (self-host, см. DESIGN.md) */
  --font-serif: "Literata", "Georgia", "Times New Roman", serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Типографика: плавная шкала, line-height в паре */
  --text-caption: 0.875rem;
  --text-body-sm: 1rem;
  --text-body: clamp(1.0625rem, 1.02rem + 0.2vw, 1.25rem);
  --text-subheading: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-heading-sm: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --text-heading: clamp(1.75rem, 1.4rem + 1.8vw, 2.25rem);
  --text-heading-lg: clamp(2.125rem, 1.6rem + 2.6vw, 2.875rem);
  --text-display: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
  --leading-tight: 1.08;
  --leading-heading: 1.2;
  --leading-snug: 1.4;
  --leading-ui: 1.5;
  --leading-prose: 1.72;
  --measure: 65ch;

  /* Отступы (кратно 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-gap: clamp(48px, 8vw, 64px);
  --card-padding: clamp(20px, 3vw, 32px);
  --container: 1200px;

  /* Радиусы */
  --radius-input: 8px;
  --radius-card: 12px;
  --radius-pill: 20px;
  --radius-footer: 56px;
  --radius-round: 999px;

  /* Линии */
  --border-width: 1.5px;
  --border: var(--border-width) solid var(--color-line);

  /* Тени: «шёпот», не тяжелее */
  --shadow-card: 0 2px 20px 0 rgb(0 0 0 / 6%);
  --shadow-button: 0 1px 2px 0 rgb(0 0 0 / 25%);

  /* Motion */
  --dur-fast: 150ms;
  --dur-med: 300ms;
  --dur-slow: 600ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --stagger: 60ms; /* шаг каскада: delay = var(--i) * var(--stagger) */
  --lift: -4px; /* подъём карточки при hover */
  --reveal-shift: 16px;
}

/* Тёмная тема: системная, если пользователь не выбрал светлую вручную */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-canvas: #171310;
    --color-surface: #221c17;
    --color-ink: #f5ede3;
    --color-heading: #fff6ea;
    --color-muted: #b8ab9c;
    --color-line: #f5ede3;
    --color-line-soft: rgb(245 237 227 / 16%);
    --color-accent-text: #ff8a4c;
    --color-focus: #ff8a4c;
    --color-mark-letter: #171310;
    --color-selection: rgb(255 111 30 / 38%);
    --shadow-card: 0 2px 20px 0 rgb(0 0 0 / 35%);
    --shadow-button: 0 1px 2px 0 rgb(0 0 0 / 60%);
  }
}

/* Тёмная тема: выбрана вручную */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #171310;
  --color-surface: #221c17;
  --color-ink: #f5ede3;
  --color-heading: #fff6ea;
  --color-muted: #b8ab9c;
  --color-line: #f5ede3;
  --color-line-soft: rgb(245 237 227 / 16%);
  --color-accent-text: #ff8a4c;
  --color-focus: #ff8a4c;
  --color-mark-letter: #171310;
  --color-selection: rgb(255 111 30 / 38%);
  --shadow-card: 0 2px 20px 0 rgb(0 0 0 / 35%);
  --shadow-button: 0 1px 2px 0 rgb(0 0 0 / 60%);
}