/* css/variables.css — токены дизайна (ТЗ §16) */

:root {
  /* Базовый фон (ТЗ §16.2) */
  --color-bg: #0d0d1a;
  --color-bg-soft: #14142a;
  --color-bg-deep: #07070f;

  /* Корпоративный фиолетовый ПравоТех (ТЗ §16.2) */
  --color-brand: #8c26ea;
  --color-brand-rgb: 140, 38, 234;
  --color-brand-soft: #a85cf2;
  --color-brand-deep: #5c10a8;

  /* Дополнительные неоны (ТЗ §16.2) */
  --color-cyan: #18d8f0;
  --color-magenta: #ff3ea5;
  --color-green-term: #5fff8f;
  /* Ретро-аркада: «экран» автомата (не неоновый UI) */
  --arcade-bezel-outer: #0a090f;
  --arcade-bezel-mid: #242236;
  --arcade-bezel-inner: #3d3858;
  --arcade-screen-bg: #0e0d16;
  --arcade-screen-tint: rgba(72, 110, 72, 0.06);
  --arcade-shadow-drop: 5px 5px 0 rgba(0, 0, 0, 0.65);
  /* Лёгкая верхняя грань «пластика» — один ритм для шапки, панелей и автоматов */
  --arcade-face-highlight: rgba(255, 255, 255, 0.065);

  /* Нейтральные */
  --color-text: #f4f3ff;
  --color-text-dim: #b6b3d6;
  --color-text-muted: #6e6a8c;
  --color-line: rgba(244, 243, 255, 0.12);

  /*
    Вторичные кнопки и подписи на тёмном фоне — запас по контрасту к WCAG AA (~4.5:1)
    при типичных размерах шрифта (проверено визуально против #121018 / #0e0d16).
  */
  --btn-quiet-fg: #dcdcf2;
  --btn-quiet-fg-hover: #f4f3ff;
  --btn-quiet-border: rgba(222, 218, 242, 0.45);
  --btn-quiet-bg-top: #241f34;
  --btn-quiet-bg-bottom: #161422;
  --result-panel-heading: #b8b4dc;

  /* Состояния */
  --color-disabled: rgba(244, 243, 255, 0.25);
  --color-success: #5fff8f;
  --color-error: #ff3e3e;

  /* Receipt-палитра (ТЗ §9.2) */
  --color-paper: #f3eee2;
  --color-paper-shade: #d9d3c1;
  --color-ink: #15140e;

  /*
   * Типографика — два шрифта, один ритм:
   *   --font-display ─ Press Start 2P: акцентные бейджи, маркиза «EXTRA TIME»,
   *                    игровые заголовки, проценты-таблички. ТОЛЬКО мелкие капсы.
   *   --font-mono / --font-body / --font-receipt ─ VT323:
   *                    тело UI, терминал, опции, кнопки, чек.
   * Стек одинаковый для всех «текстовых» переменных, чтобы
   *   при отсутствии VT323 фолбэк выглядел одинаково везде.
   */
  --font-display: "Press Start 2P", "VT323", "Courier New", ui-monospace, monospace;
  --font-mono: "VT323", "Courier New", ui-monospace, monospace;
  --font-body: "VT323", "Courier New", ui-monospace, monospace;
  --font-receipt: "VT323", "Courier New", ui-monospace, monospace;

  /* Размеры */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 28px;
  --fs-display: 40px;

  /* Радиусы */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* Отступы */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /*
    Этапы с мини-сценой (q1–q3): строка бейджей над кабинетом вопроса —
    тем же значением компенсируем верх aside с pix-корпусом (.layout.css).
  */
  --pt-stage-badge-row-min-height: 2.75rem;
  --pt-pix-aside-offset: calc(
    var(--space-5) + var(--pt-stage-badge-row-min-height) + var(--space-3)
  );

  /* Тени / свечение */
  --glow-brand: 0 0 18px rgba(var(--color-brand-rgb), 0.45);
  --glow-soft: 0 0 12px rgba(var(--color-brand-rgb), 0.25);

  /* Длительности анимаций */
  --duration-fast: 150ms;
  --duration-base: 280ms;
  --duration-slow: 600ms;
  /* js/config.js BOOT_DURATION_MS — держите те же ms */
  --duration-boot: 3000ms;

  /* Контейнер */
  --content-max: 960px;
  --content-min: 320px;

  /* Z-индексы — слои сцены (визуальный апгрейд аркады) */
  --z-background: 0;
  --z-decor: 1;
  --z-taymi: 2;
  --z-crt: 14;
  --z-ui: 20;
  --z-base: 1;
  --z-screens: 10;
  /* Запас высоких слоёв на оверлеи */
  --z-wipe: 48;
  --z-overlay: 50;
  --z-toast: 100;
}