/* ============================================================
   Design tokens — единственный файл для ребрендинга проекта.
   Primitive (p-*) → semantic. styles.css использует только
   semantic-токены.
   ============================================================ */

/* :root — для standalone; body.font-body — под root layout приложения:
   globals.css задаёт :root-переменные с теми же именами (--color-bg,
   --color-accent, --font-display, --font-body), а переменные, заданные
   на body, перекрывают :root для потомков независимо от порядка CSS. */
:root, body.font-body {
  /* ---- Primitives: palette (эталон — тёмный графит + золото) ---- */
  --p-bg: #141518;
  --p-surface: #0e0f12;
  --p-chip: #0b0d10;
  --p-track: #1a1d22;
  --p-accent: #c2a05e;
  --p-accent-light: #e0c48c;
  --p-glow: #c2a05e;
  --p-text-primary: #f2f3f5;
  --p-text-secondary: #9ba0a8;
  --p-text-muted: #8b919b;
  --p-on-accent: #14171c; /* текст/иконки поверх акцентной заливки */
  --p-live: #e5484d;      /* индикатор LIVE/пульс — статусы, не тема */

  /* ---- Primitives: alpha (поверх --p-*) ---- */
  --p-line: rgba(255, 255, 255, 0.06);   /* хайрлайны таймера */
  --p-glass: rgba(11, 13, 16, 0.65);     /* стеклянные чипы на видео */
  --p-sheen: rgba(255, 255, 255, 0.03);  /* верхний свет на фоне */

  /* ---- Semantic: colors ---- */
  --color-bg: var(--p-bg);
  --color-surface: var(--p-surface);
  --color-chip: var(--p-chip);
  --color-track: var(--p-track);
  --color-accent: var(--p-accent);
  --color-gold-light: var(--p-accent-light);
  --color-accent-25: rgba(194, 160, 94, 0.25);
  --color-sep: rgba(194, 160, 94, 0.35);
  --color-text: var(--p-text-primary);
  --color-text-secondary: var(--p-text-secondary);
  --color-text-muted: var(--p-text-muted);
  --color-on-accent: var(--p-on-accent);
  --color-live: var(--p-live);
  /* Стекло чипов: полупрозрачная подложка --color-chip поверх видео
     (темы перекрывают --color-chip — стекло следует за ней). */
  --color-chip-glass: color-mix(in srgb, var(--color-chip) 72%, transparent);
  /* Производные градации текста: идут за темой (смешиваются с её
     text/secondary/muted), отдельного поля в палитре тем у них нет.
     faint — микрозаметки футера: база secondary (muted на части тёмных тем
     сам ниже 4.5, потолок смешивки был недостаточен). На светлых темах
     themeStyle перекрывает долю (90%) — там нужен более тёмный тон. */
  --color-text-soft: color-mix(in srgb, var(--color-text) 54%, var(--color-text-secondary));
  --color-text-faint: color-mix(in srgb, var(--color-text-secondary) 78%, var(--color-bg));

  /* ---- Semantic: borders ---- */
  --border-poster: rgba(194, 160, 94, 0.45);
  --border-default: rgba(194, 160, 94, 0.25);
  --border-frame: rgba(194, 160, 94, 0.2);
  --border-subtle: rgba(139, 145, 155, 0.16); /* хайрлайны: тикер, программа */
  --border-on-gold: rgba(20, 23, 28, 0.25);   /* стрелка CTA на золотом фоне */

  /* ---- Semantic: gradient & effects ---- */
  --gradient-gold: linear-gradient(0deg, var(--p-accent-light) 0%, var(--p-accent) 100%);
  --glow-hero: radial-gradient(ellipse 60% 55% at 74% 40%, rgba(194, 160, 94, 0.08) 0%, rgba(194, 160, 94, 0) 100%);
  --glow-main: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(194, 160, 94, 0.13) 0%, rgba(20, 21, 24, 0) 100%);
  --glow-video: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(194, 160, 94, 0.15) 0%, rgba(20, 21, 24, 0) 100%);
  --sheen-top: linear-gradient(180deg, var(--p-sheen) 0%, rgba(255, 255, 255, 0) 55%);
  --overlay-top: rgba(11, 13, 16, 0.55);
  --overlay-bottom: rgba(11, 13, 16, 0.8);

  /* ---- Semantic: typography ---- */
  --font-display: "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* ---- Semantic: radii ---- */
  --radius-seg: 14px;
  --radius-cta: 10px;
  --radius-poster: 16px;
  --radius-pill: 999px;

  /* ---- Fluid-шкала: «один экран по построению» ----
     Типографика и ритм тянутся от размеров окна: горизонтальные величины
     — от vw, вертикальные — от vh (высота окна и есть ограничитель
     одноэкранной страницы). styles.css добавляет ступень max-height
     для низких ноутбуков. */
  --fs-display: clamp(27px, 3vw, 48px);     /* H1 (ревизия Boris 2026-09-24
     «слишком большой»: было clamp(28px, 3.6vw, 60px) — притушено до 43px
     на 1440, 48px потолок на больших мониторах) */
  --fs-subtitle: clamp(14.5px, 1.15vw, 17px);
  --fs-digit: clamp(26px, 2.6vw, 44px);     /* цифры таймера */
  --pad-x: clamp(20px, 4.4vw, 64px);        /* поля каркаса по горизонтали */
  --pad-y: clamp(20px, 3.4vh, 40px);        /* поля сцены по вертикали */
  --gap-main: clamp(28px, 4vh, 44px);       /* герой ↔ программа */
  --gap-copy: clamp(16px, 2.6vh, 26px);     /* ритм левой колонки */
  --poster-max-h: 46vh;                     /* потолок высоты видео (16:9) */
}