/*
 * Design tokens — GemX Market (Phase 8A, раздел 5/23 задачи).
 * Единственное место с raw hex/px значениями. Компоненты используют ТОЛЬКО эти
 * переменные — раздел 23 задачи: "цель — чтобы после этой фазы изменение общего
 * визуального характера приложения делалось централизованно".
 *
 * Концепция (раздел 3-4 задачи): premium dark marketplace, не игровой лендинг.
 * Dark Indigo / Electric Blue, без neon/particles/чрезмерного glow.
 */
:root {
  /* Background — mesh-gradient/light-flare (final correction pass, раздел 18 задачи):
     заменяет предыдущий единственный radial gradient (correction pass №2). Базовый слой —
     глубокий indigo, СВЕТЛЕЕ прежнего near-black центра (раздел 18: "фон должен быть
     светлее и глубже, не превращать UI в почти чёрный"); поверх — два мягких electric-blue
     flare'а (верхний левый и более широкий нижний правый), а не единый концентричный
     градиент. См. base.css body::before.
  */
  --bg-base: #10142c;
  --bg-deep: #05070f;
  --bg-flare-primary: rgba(61, 139, 255, 0.32);
  --bg-flare-secondary: rgba(91, 157, 255, 0.26);

  /* Surfaces */
  --color-surface: #14161f;
  --color-surface-elevated: #1a1d29;
  --color-graphite: #1c1f2b;
  --color-border: #2b2f3f;

  /* Text */
  --color-text-primary: #ffffff;
  --color-text-secondary: #c7cadb;
  --color-text-muted: #8b8fa6;

  /* Interactive */
  --color-accent: #3d8bff;
  --color-accent-strong: #5b9dff;
  --color-focus: #6fb1ff;
  --color-success: #3fbf8f;
  --color-warning: #e0ab3d;
  --color-danger: #e2555f;
  --color-disabled: #454858;

  /* Status badges — сдержанные тона, раздел 7 задачи */
  --status-pending-bg: rgba(61, 139, 255, 0.16);
  --status-pending-fg: #8fbcff;
  --status-approved-bg: rgba(63, 191, 143, 0.16);
  --status-approved-fg: #6fe0b8;
  --status-rejected-bg: rgba(226, 85, 95, 0.16);
  --status-rejected-fg: #f0919a;
  --status-sold-bg: rgba(139, 143, 166, 0.18);
  --status-sold-fg: #c3c6d6;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Shadows — умеренные, без чрезмерного glow (раздел 7 задачи) */
  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-accent-soft: 0 0 20px rgba(61, 139, 255, 0.22);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.55);

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-page-title: 20px;
  --font-size-section-title: 15px;
  --font-size-label: 13px;
  --font-size-value: 15px;
  --font-size-helper: 12px;
  --font-size-metadata: 12px;
  --line-height-base: 1.4;

  /* Логотип header'а (правка размера логотипа): "gemx logo.png" — квадратный
     1280×1280 холст, где сам знак "X" занимает лишь ~35% высоты холста
     (остальное — прозрачное поле вокруг фигуры). Поэтому 28px-контейнер (как
     было раньше) визуально давал ЗНАК высотой ~10px — заметно мельче
     cap-height подписи "GemX Market" (~14px при font-size-page-title=20px).
     40px даёт видимый знак ~14px — сопоставимо с высотой букв названия, не
     превращая при этом X в доминирующий элемент. Изображение не обрезается —
     PNG остаётся 1:1, ширина берётся равной высоте в app.css.
  */
  --logo-height: 40px;

  /* Controls */
  --control-height-md: 44px;
  --control-height-sm: 36px;
  --touch-target-min: 44px;

  /* Transitions — restrained (раздел 24 задачи) */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}

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