/* =============================================================================
 * tokens.css — ЕДИНЫЙ ИСТОЧНИК ИСТИНЫ дизайн-системы ГЕОБОРД.
 *
 * До редизайна токены жили в двух местах с разными именами:
 *   • style.css  → --accent / --panel / --red …   (карта, админ, логин)
 *   • tools.css  → --pri / --card / --alert …      (анализ, радио) + алиасы
 * плюс десятки хардкод-значений в разметке. Это классическая фрагментация.
 *
 * Здесь всё сведено в трёхслойную модель:
 *   1) ПРИМИТИВЫ (--p-*)      — сырая палитра и шкалы, без семантики
 *   2) СЕМАНТИКА (--ds-*)     — роли: поверхности, текст, границы, статусы
 *   3) АЛИАСЫ СОВМЕСТИМОСТИ    — старые имена (--accent/--pri/…) ссылаются
 *                               на семантику, поэтому весь существующий CSS
 *                               продолжает работать без правок.
 *
 * Подключать ПЕРВЫМ из стилей (до style.css / tools.css), чтобы каскад видел
 * канонические значения, а старые :root в тех файлах их лишь переопределяли
 * тем же цветом. Меняете тему — меняете ТОЛЬКО этот файл.
 * ========================================================================== */

:root {
  color-scheme: dark;

  /* ─────────────────────────── 1. ПРИМИТИВЫ ─────────────────────────────
     Сырые значения. Никогда не используйте их напрямую в компонентах —
     только через семантические токены ниже. */

  /* Нейтральная «земляная» шкала (тёмно-коричневая, фирменная) */
  --p-clay-950: #14110e;
  --p-clay-900: #1d1916;
  --p-clay-850: #262019;
  --p-clay-800: #2f2820;
  --p-clay-700: #3a3128;
  --p-clay-600: #4a4034;
  --p-clay-500: #6b6256;
  --p-clay-300: #9a8f7d;
  --p-clay-150: #c9bda8;
  --p-clay-050: #ece3d4;

  /* Золото (фирменный акцент) */
  --p-gold-600: #b8933f;
  --p-gold-500: #d0a94f;
  --p-gold-400: #dcbb6a;
  --p-gold-300: #e7cf95;

  /* Статусные цвета */
  --p-green-500: #7ba85a;
  --p-amber-500: #d99b3a;
  --p-red-500:   #c6553f;
  --p-cyan-500:  #3fb0c9;
  --p-blue-500:  #5b8fb0;

  /* Прозрачности акцента / фокуса / теней */
  --p-alpha-gold-15: rgba(208, 169, 79, .15);
  --p-alpha-gold-25: rgba(208, 169, 79, .25);
  --p-alpha-gold-40: rgba(208, 169, 79, .40);
  --p-alpha-black-35: rgba(0, 0, 0, .35);
  --p-alpha-black-50: rgba(0, 0, 0, .50);

  /* ───────────────────────────── 2. СЕМАНТИКА ───────────────────────────
     Роли интерфейса. Именно ЭТИ токены используйте в новом коде. */

  /* Поверхности (по возрастанию «высоты») */
  --ds-surface-base:  var(--p-clay-950);  /* фон приложения / карта */
  --ds-surface-1:     var(--p-clay-900);  /* панели, карточки */
  --ds-surface-2:     var(--p-clay-850);  /* поля ввода, вложенные блоки */
  --ds-surface-3:     var(--p-clay-800);  /* ховер, активные пилюли */
  --ds-surface-4:     var(--p-clay-700);

  /* Границы */
  --ds-border:        var(--p-clay-700);
  --ds-border-soft:   var(--p-clay-850);
  --ds-border-strong: var(--p-clay-600);

  /* Текст */
  --ds-text:          var(--p-clay-050);  /* основной */
  --ds-text-muted:    var(--p-clay-300);  /* второстепенный / подписи */
  --ds-text-faint:    var(--p-clay-500);  /* совсем тихий */
  --ds-text-on-accent: var(--p-clay-950); /* текст на золотой заливке */

  /* Акцент / бренд */
  --ds-accent:        var(--p-gold-500);
  --ds-accent-hover:  var(--p-gold-400);
  --ds-accent-press:  var(--p-gold-600);
  --ds-accent-soft:   var(--p-alpha-gold-15);
  --ds-focus-ring:    var(--p-alpha-gold-40);

  /* Статусы */
  --ds-ok:    var(--p-green-500);
  --ds-warn:  var(--p-amber-500);
  --ds-error: var(--p-red-500);
  --ds-info:  var(--p-cyan-500);

  /* ─────────────────────── Шкалы (не цветовые) ──────────────────────── */

  /* Радиусы */
  --ds-radius-xs: 6px;
  --ds-radius-sm: 8px;
  --ds-radius-md: 10px;
  --ds-radius-lg: 12px;
  --ds-radius-xl: 16px;
  --ds-radius-pill: 999px;

  /* Отступы (шаг 4px) */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;

  /* Иерархия отступов «внутреннее < внешнее» (Нозик / Бюро Горбунова).
     Чем теснее связаны элементы, тем плотнее они стоят:
       gap-inner   — внутри одного контрола (метка ↔ поле)      = 5px
       gap-item    — между соседними контролами/элементами       = 14px
       gap-group   — между группами контролов (секция ↔ секция)  = 18px
       gap-section — между крупными блоками/разделами панели     = 24px */
  --ds-gap-inner:   5px;
  --ds-gap-item:    14px;
  --ds-gap-group:   18px;
  --ds-gap-section: 24px;

  /* Тени / «высота» */
  --ds-elev-1: 0 2px 10px var(--p-alpha-black-35);
  --ds-elev-2: 0 10px 30px var(--p-alpha-black-50);
  --ds-elev-3: 0 20px 48px rgba(0, 0, 0, .6);

  /* Типографика */
  --ds-font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --ds-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ds-fs-caption: 11px;
  --ds-fs-sm:      12px;
  --ds-fs-body:    14px;
  --ds-fs-lead:    16px;
  --ds-fs-h3:      20px;
  --ds-fs-h2:      24px;
  --ds-fs-h1:      32px;
  --ds-fs-display: 40px;

  --ds-lh-tight: 1.2;
  --ds-lh-snug:  1.35;
  --ds-lh-body:  1.5;

  --ds-tracking-caps: .16em;   /* капслок-подписи */
  --ds-tracking-brand: .16em;

  /* Движение */
  --ds-motion-fast: .12s cubic-bezier(.16, 1, .3, 1);
  --ds-motion:      .16s cubic-bezier(.16, 1, .3, 1);
  --ds-motion-slow: .28s cubic-bezier(.16, 1, .3, 1);

  /* Z-слои (единая шкала, чтобы оверлеи не «воевали») */
  --ds-z-map:      1;
  --ds-z-panel:    10;
  --ds-z-topbar:   20;
  --ds-z-drawer:   40;
  --ds-z-dialog:   60;
  --ds-z-toast:    80;

  /* ──────────────── 3. АЛИАСЫ СОВМЕСТИМОСТИ (старые имена) ──────────────
     Не удалять: на них завязан весь существующий style.css / tools.css.
     Все ссылаются на семантику выше → тема правится в одном месте. */

  /* style.css */
  --bg:          var(--ds-surface-base);
  --panel:       var(--ds-surface-1);
  --panel-2:     var(--ds-surface-2);
  --panel-3:     var(--ds-surface-3);
  --line:        var(--ds-border);
  --line-soft:   var(--ds-border-soft);
  --ink:         var(--ds-text);
  --ink-dim:     var(--ds-text-muted);
  --accent:      var(--ds-accent);
  --accent-ink:  var(--ds-text-on-accent);
  --accent-soft: var(--ds-accent-soft);
  --ring:        var(--ds-focus-ring);
  --green:       var(--ds-ok);
  --amber:       var(--ds-warn);
  --red:         var(--ds-error);
  --grey:        var(--p-clay-500);
  --r-sm: var(--ds-radius-sm);
  --r-md: var(--ds-radius-md);
  --r-lg: var(--ds-radius-lg);
  --r-xl: var(--ds-radius-xl);
  --gap-inner:   var(--ds-gap-inner);
  --gap-item:    var(--ds-gap-item);
  --gap-group:   var(--ds-gap-group);
  --gap-section: var(--ds-gap-section);
  --sh-1: var(--ds-elev-1);
  --sh-2: var(--ds-elev-2);
  --ui:   var(--ds-font-ui);
  --serif: var(--ds-font-ui);
  --mono: var(--ds-font-mono);
  --t:    var(--ds-motion);

  /* tools.css */
  --card:      var(--ds-surface-1);
  --secondary: var(--ds-surface-2);
  --ink-inv:   var(--ds-text-on-accent);
  --pri:       var(--ds-accent);
  --pri-soft:  var(--ds-accent-soft);
  --ok:        var(--ds-ok);
  --warn:      var(--ds-warn);
  --alert:     var(--ds-error);
  --info:      var(--ds-accent);
  --sh:  var(--ds-elev-1);
  --sh2: var(--ds-elev-2);
}