/* ============================================================================
   Desert King — Design Tokens  (v2 — тема-aware: dark/light + 4 акцента)
   ----------------------------------------------------------------------------
   Эстетика Davies: тёмное поле + неоновые свечения, жирный Figtree, карточки
   с тонкими границами, крупные счётчики. Светлая тема — «реверс» той же системы.
   Управление: body[data-theme="dark|light"] + body[data-accent="blue|green|amber|navy"].
   Источник правды для всех компонентов — этот файл.
   ============================================================================ */

:root {
  /* ===== DARK (тема по умолчанию) ====================================== */
  /* точные значения Davies: фон #000, текст white, линии white-16 */
  --dk-black:     #000000;
  --dk-bg:        #000000; /* page background (Davies body)                 */
  --dk-surface-1: transparent; /* карточки — прозрачные (сливаются с фоном)  */
  --dk-surface-2: #0a0b0c; /* лёгкая полоса-секция (как Services band)       */
  --dk-surface-3: transparent; /* инпуты — прозрачные с границей            */

  --dk-border:        rgba(255,255,255,0.16); /* white-16 — основная линия  */
  --dk-border-strong: rgba(255,255,255,0.32); /* white-32                    */
  --dk-border-faint:  rgba(255,255,255,0.05); /* inset-хайрлайн карточки     */

  --dk-white:    #ffffff;  /* самый сильный текст / заголовки               */
  --dk-text:     #ffffff;
  --dk-text-64:  rgba(255,255,255,0.64); /* white-64                        */
  --dk-text-40:  rgba(255,255,255,0.40);
  --dk-text-24:  rgba(255,255,255,0.20); /* white-32-ish                    */

  /* helper-токены (перекрываются в светлой теме) */
  --fill:      #ffffff;  /* заливка ghost-кнопки (slide-up)                 */
  --fill-on:   #07080a;  /* текст на этой заливке                           */
  --media-bg:  linear-gradient(135deg, #0c0d0f 0%, #1a1d21 100%);
  --chrome-bg: rgba(8,9,10,0.86);   /* TOC / switch фон                     */
  --shadow:        0 24px 60px rgba(0,0,0,0.55);
  --grid-line:     rgba(255,255,255,0.05);

  /* ===== ACCENT (по умолчанию blue; перекрывается data-accent) ========= */
  --accent-700: #1aa6d8;
  --accent-600: #2ac6f8; /* основной акцент — заливки/иконки                */
  --accent-500: #45d4ff;
  --accent-400: #7ee2ff;
  --accent-rgb: 42,198,248;
  --accent-on:  #001018; /* текст на заливке акцентом                       */
  --accent-soft: rgba(var(--accent-rgb),0.12);
  --accent-line: rgba(var(--accent-rgb),0.40);
  --accent-ink:  var(--accent-600); /* акцент-ТЕКСТ (в светлой — темнее)    */

  /* ---- Gradient blocks + полосы — МОНОХРОМ по акценту (без зелёного) --- */
  --grad-border: linear-gradient(135deg, rgba(var(--accent-rgb),0.85), rgba(var(--accent-rgb),0.15) 55%, transparent);
  --grad-panel:  linear-gradient(160deg, rgba(var(--accent-rgb),0.10) 0%, var(--dk-surface-1) 45%);
  --stripe-h: linear-gradient(90deg, transparent 0%, var(--accent-600) 50%, transparent 100%);
  --stripe-v: linear-gradient(180deg, transparent 0%, var(--accent-600) 50%, transparent 100%);

  /* ---- Glows / atmosphere --------------------------------------------- */
  --glow-accent: radial-gradient(60% 60% at 50% 40%, rgba(var(--accent-rgb),0.42) 0%, rgba(var(--accent-rgb),0.12) 35%, transparent 70%);
  --glow-soft:   radial-gradient(50% 50% at 50% 50%, rgba(var(--accent-rgb),0.18) 0%, transparent 70%);

  /* ---- Typography — Figtree ------------------------------------------- */
  --font-main: "Figtree", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --fs-display: clamp(42px, 12vw, 190px); /* davies-large, но влезает на моб  */
  --fs-h1: clamp(36px, 5vw, 64px);
  --fs-h2: clamp(32px, 4.5vw, 56px);
  --fs-h3: clamp(28px, 4vw, 48px);
  --fs-h4: clamp(26px, 3.5vw, 40px);
  --fs-h5: clamp(22px, 3vw, 32px);
  --fs-h6: clamp(20px, 2.5vw, 24px);
  --fs-body: 16px; --fs-lead: 18px; --fs-sm: 14px; --fs-xs: 12px; --fs-eyebrow: 13px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;
  --lh-tight: 1.05; --lh-snug: 1.25; --lh-base: 1.6;
  --tracking-tight: -0.02em; --tracking-eyebrow: 0.16em;

  /* ---- Spacing / radius / motion / layout ----------------------------- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --space-20:80px; --space-24:96px; --space-32:128px;
  /* как в Davies: БЛОКИ — острые (0), кнопки — скруглённые (10px, ниже), чипы — pill */
  --radius-sm:0; --radius:0; --radius-lg:0; --radius-xl:0; --radius-pill:999px;
  --shadow-accent: 0 8px 22px rgba(var(--accent-rgb),0.22);
  --ease: cubic-bezier(0.22,1,0.36,1); --t-fast:0.18s var(--ease); --t:0.4s var(--ease);
  --container:1240px; --container-narrow:820px;
  --logo-h: 40px; /* размер знака (чуть больше) */
}

/* ============================================================================
   LIGHT THEME — реверс палитры (стильно и читаемо на белом)
   ============================================================================ */
body[data-theme="light"] {
  --dk-bg:        #ffffff;
  --dk-surface-1: #f6f8fb; /* cards                                        */
  --dk-surface-2: #eef1f6; /* band                                         */
  --dk-surface-3: #ffffff; /* inputs                                       */

  --dk-border:        rgba(15,23,42,0.12);
  --dk-border-strong: rgba(15,23,42,0.20);
  --dk-border-faint:  rgba(15,23,42,0.08);

  --dk-white:    #0d1422; /* сильный текст/заголовки = почти чёрный         */
  --dk-text:     #1f2937;
  --dk-text-64:  rgba(15,23,42,0.66);
  --dk-text-40:  rgba(15,23,42,0.48);
  --dk-text-24:  rgba(15,23,42,0.28);

  --fill:      #0d1422; /* ghost-кнопка заливается тёмным                  */
  --fill-on:   #ffffff;
  --media-bg:  linear-gradient(135deg, #e9eef5 0%, #f6f8fb 100%);
  --chrome-bg: rgba(255,255,255,0.86);
  --shadow:        0 24px 60px rgba(15,23,42,0.12);
  --grid-line:     rgba(15,23,42,0.05);

  /* акцент-ТЕКСТ темнее (cyan на белом не читается) */
  --accent-ink: var(--accent-700);
  --accent-soft: rgba(var(--accent-rgb),0.14);
  /* свечения мягче на белом */
  --glow-accent: radial-gradient(60% 60% at 50% 40%, rgba(var(--accent-rgb),0.20) 0%, rgba(var(--accent-rgb),0.06) 38%, transparent 70%);
  --glow-soft:   radial-gradient(50% 50% at 50% 50%, rgba(var(--accent-rgb),0.10) 0%, transparent 70%);
  --shadow-accent: 0 16px 36px rgba(var(--accent-rgb),0.22);
}

/* ============================================================================
   ACCENT THEMES — меняют только --accent-* (работают в обеих темах)
   ============================================================================ */
body[data-accent="blue"]  { --accent-700:#1184b4; --accent-600:#2ac6f8; --accent-500:#45d4ff; --accent-400:#7ee2ff; --accent-rgb:42,198,248;  --accent-on:#001018; }
body[data-accent="green"] { --accent-700:#0a7c22; --accent-600:#07c42c; --accent-500:#20d943; --accent-400:#4dee69; --accent-rgb:7,196,44;    --accent-on:#001a06; }
body[data-accent="amber"] { --accent-700:#b45709; --accent-600:#e9791e; --accent-500:#f4944a; --accent-400:#ffb574; --accent-rgb:233,121,30; --accent-on:#1a0c00; }
body[data-accent="navy"]  { --accent-700:#0f1f36; --accent-600:#172d4a; --accent-500:#274a78; --accent-400:#3c5d90; --accent-rgb:23,45,74;    --accent-on:#ffffff; }