/* ============================================================
   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: #0a0906;
  --p-surface: #14100a;
  --p-chip: #171208;
  --p-track: #2a2114;
  --p-gold-1: #f5e6b4;
  --p-gold-2: #e8d08a;
  --p-gold-3: #d4b266;
  --p-gold-accent: #e6cf92;
  --p-gold-light: #f0dba0;
  --p-gold-glow: #b8860b;
  --p-play-glow: #e9cf82;
  --p-text-primary: #f5efdd;
  --p-text-secondary: #cdc3ae;
  --p-text-muted: #a99b7d;
  --p-on-accent: #14100a; /* текст/иконки поверх акцентной заливки */

  /* ---- Primitives: alpha borders (база #e0c37c / #e6cf92) ---- */
  --p-border-45: rgba(224, 195, 124, 0.45); /* рамка постера (#E0C37C73) */
  --p-border-25: rgba(224, 195, 124, 0.25); /* чипы, таймер (#E0C37C40) */
  --p-border-20: rgba(224, 195, 124, 0.2);  /* inset frame (#E0C37C33) */
  --p-border-15: rgba(224, 195, 124, 0.15); /* rule, бары плеера (#E0C37C26) */
  --p-accent-35: rgba(224, 195, 124, 0.35); /* sep (#E0C37C59) */
  --p-accent-25: rgba(230, 207, 146, 0.25); /* pulse ring, divider (#E6CF9240) */

  /* ---- 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-gold-accent);
  --color-gold-light: var(--p-gold-light);
  --color-accent-25: var(--p-accent-25);
  --color-sep: var(--p-accent-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);

  /* ---- Semantic: borders ---- */
  --border-poster: var(--p-border-45);
  --border-default: var(--p-border-25);
  --border-frame: var(--p-border-20);
  --border-subtle: var(--p-border-15);
  --border-on-gold: rgba(20, 16, 10, 0.25); /* разделитель CTA на золотом фоне (hover) */

  /* ---- Semantic: gradient & effects ---- */
  --gradient-gold: linear-gradient(0deg, var(--p-gold-1) 0%, var(--p-gold-2) 55%, var(--p-gold-3) 100%);
  --glow-main: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(184, 134, 11, 0.13) 0%, rgba(10, 9, 6, 0) 100%);
  --glow-video: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(184, 134, 11, 0.15) 0%, rgba(10, 9, 6, 0) 100%);
  --glow-play: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(233, 207, 130, 0.25) 0%, rgba(10, 9, 6, 0) 100%);
  --shadow-play: 0 6px 24px rgba(224, 195, 124, 0.35);
  --overlay-top: rgba(10, 9, 6, 0.6);
  --overlay-bottom: rgba(10, 9, 6, 0.8);

  /* ---- Semantic: typography ---- */
  --font-display: "Geologica", system-ui, sans-serif;
  --font-body: "Golos Text", system-ui, sans-serif;

  /* ---- Semantic: radii ---- */
  --radius-chip: 10px;
  --radius-timer: 12px;
  --radius-cta: 14px;
  --radius-poster: 16px;
  --radius-frame: 20px;
  --radius-pill: 999px;
}