/* =====================================================================
   Платформа 3FSOFT — дизайн-токены (двухслойные: primitive → semantic)
   Единый источник для Go-HTML (публичка/styleguide) и React (lk./admin).
   База — prototype/prototype.css, рампы пересобраны в OKLCH (design-research §4).

   P0-фиксы (design-research):
   - контраст: --brand-text = blue-700 на светлом (ссылки/мелкий текст), НЕ #009bf0;
   - янтарь-бренд (hue ~72, золотистый) ≠ warning (hue ~58, оранжевый) — разные токены;
   - a11y: :focus-visible 3px ring, prefers-reduced-motion, тач-таргеты ≥44px;
   - нейтрали — slate (не true-gray); тёмная тема — иерархия поверхностями.
   ===================================================================== */

/* ---------- СЛОЙ 1: PRIMITIVES (сырые рампы в OKLCH) ---------- */
:root {
  /* Brand blue — #009bf0 ≈ oklch(.66 .16 235). Единая сетка светлоты. */
  --blue-50:  oklch(0.97 0.02 235);
  --blue-100: oklch(0.93 0.04 235);
  --blue-200: oklch(0.87 0.07 235);
  --blue-300: oklch(0.80 0.10 235);
  --blue-400: oklch(0.73 0.14 235);
  --blue-500: oklch(0.66 0.16 235);  /* = #009bf0, brand-solid */
  --blue-600: oklch(0.59 0.15 235);  /* hover */
  --blue-700: oklch(0.50 0.13 235);  /* brand-text на светлом (AA ≈4.8:1) */
  --blue-800: oklch(0.42 0.10 235);
  --blue-900: oklch(0.34 0.08 235);

  /* Amber — вторичный бренд (золотистый, hue ~72). #F59E0B. */
  --amber-50:  oklch(0.97 0.03 75);
  --amber-100: oklch(0.93 0.06 75);
  --amber-300: oklch(0.84 0.13 75);
  --amber-500: oklch(0.78 0.16 75);  /* = #F59E0B, accent */
  --amber-600: oklch(0.70 0.16 72);  /* hover (#D97706) */
  --amber-700: oklch(0.55 0.13 70);  /* accent-text на светлом */

  /* Orange — warning (оранжевее, hue ~58). Намеренно отделён от amber. */
  --orange-500: oklch(0.70 0.17 58);
  --orange-600: oklch(0.62 0.16 55);  /* warning-text */

  /* Slate — нейтрали (синеватые, гармонируют с брендом). */
  --slate-50:  oklch(0.98 0.005 240);
  --slate-100: oklch(0.96 0.008 240);
  --slate-200: oklch(0.92 0.012 240);
  --slate-300: oklch(0.87 0.016 240);
  --slate-400: oklch(0.70 0.02 240);
  --slate-500: oklch(0.58 0.022 240);
  --slate-600: oklch(0.49 0.022 245);
  --slate-700: oklch(0.40 0.025 250);
  --slate-800: oklch(0.30 0.03 255);
  --slate-900: oklch(0.23 0.035 260);
  --slate-950: oklch(0.17 0.035 262);

  /* Emerald — success. */
  --emerald-500: oklch(0.70 0.15 162);
  --emerald-600: oklch(0.60 0.13 162);
  --emerald-700: oklch(0.50 0.11 162);

  /* Red — danger. */
  --red-500: oklch(0.63 0.22 27);
  --red-600: oklch(0.56 0.21 27);
  --red-700: oklch(0.48 0.19 27);

  /* Шкалы/радиусы/тени/типографика — общие. */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --maxw: 1200px;
  --measure: 65ch;
  --font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  --dur-fast: 100ms; --dur: 180ms; --dur-slow: 280ms;
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* Типошкала (база 16; крупные lh 1.2, body 1.55). */
  --fs-h1: 48px; --fs-h2: 32px; --fs-h3: 22px; --fs-h4: 19px;
  --fs-body: 16px; --fs-small: 14px; --fs-caption: 13px;
}

/* ---------- СЛОЙ 2: SEMANTIC (светлая тема: БЗ, кабинет, admin) ---------- */
:root, [data-theme="light"] {
  --bg:           var(--slate-100);
  --surface:      #ffffff;
  --surface-2:    var(--slate-100);
  --surface-raised: #ffffff;
  --text:         var(--slate-900);
  --text-muted:   var(--slate-500);
  --border:       var(--slate-200);

  --brand:        var(--blue-500);   /* solid: заливки, иконки, бордеры, крупные заголовки */
  --brand-hover:  var(--blue-600);
  --brand-text:   var(--blue-700);   /* ссылки/мелкий текст на светлом (AA) */
  --brand-tint:   var(--blue-50);    /* фоны бейджей/активных пунктов */

  --accent:       var(--amber-500);  /* вторичный бренд, точечно */
  --accent-hover: var(--amber-600);
  --accent-text:  var(--amber-700);

  --success:      var(--emerald-600);
  --success-tint: oklch(0.95 0.04 162);
  --warning:      var(--orange-600); /* warning — ОРАНЖЕВЫЙ, не amber */
  --warning-tint: oklch(0.95 0.05 58);
  --danger:       var(--red-600);
  --danger-tint:  oklch(0.95 0.04 27);
  --info:         var(--blue-700);

  --ring:         var(--blue-500);

  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.10);
  --shadow:    0 4px 12px rgba(15,23,42,.08);
  --shadow-lg: 0 12px 32px rgba(15,23,42,.12);
}

/* ---------- SEMANTIC (тёмная тема: маркетинг) ---------- */
[data-theme="dark"] {
  --bg:           var(--slate-950);
  --surface:      color-mix(in oklab, var(--slate-900) 70%, transparent);
  --surface-2:    var(--slate-800);
  --surface-raised: var(--slate-900);
  --text:         var(--slate-50);
  --text-muted:   var(--slate-400);
  --border:       color-mix(in oklab, var(--slate-50) 12%, transparent);

  --brand:        var(--blue-500);
  --brand-hover:  var(--blue-400);
  --brand-text:   var(--blue-300);   /* на тёмном светлее — контраст ок */
  --brand-tint:   color-mix(in oklab, var(--blue-500) 18%, transparent);

  --accent:       var(--amber-500);
  --accent-hover: var(--amber-600);
  --accent-text:  var(--amber-300);

  --success:      var(--emerald-500);
  --success-tint: color-mix(in oklab, var(--emerald-500) 18%, transparent);
  --warning:      var(--orange-500);
  --warning-tint: color-mix(in oklab, var(--orange-500) 18%, transparent);
  --danger:       var(--red-500);
  --danger-tint:  color-mix(in oklab, var(--red-500) 18%, transparent);
  --info:         var(--blue-300);

  --ring:         var(--blue-400);

  --shadow-sm: 0 2px 8px rgba(0,0,0,.30);
  --shadow:    0 8px 16px rgba(0,0,0,.30);
  --shadow-lg: 0 20px 40px rgba(0,0,0,.35);
}

/* ---------- БАЗОВЫЙ СБРОС + a11y ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); font-size: var(--fs-body);
  color: var(--text); background: var(--bg); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
[data-theme="dark"] body.page-marketing {
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 50px 50px,
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 50px 50px,
    var(--slate-950);
  background-attachment: fixed;
}
a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
h1,h2,h3,h4 { margin: 0 0 .4em; line-height: 1.2; letter-spacing: -.02em; }
h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p { margin: 0 0 1em; }

/* :focus-visible — 3px ring (≥3:1), offset 2px (design-research §1.6). */
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 4px; }

/* Уважение к prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--text-muted); }