/* ============================================================================
   AIR OBD — дизайн-токены
   База перенесена с лендинга air-obd.com (фон, поверхности, текст, акценты,
   плёнки, стёкла, радиусы, кривая, фолбэки шрифтов). Сверху — токены панели.
   Правило: в компонентах (app.css) нет ни одного литерала цвета, только var(--…).

   Акценты бывают трёх видов:
     --x        заливки, иконки, полосы прогресса (не для мелкого текста);
     --x-ink    ТЕКСТ акцентного цвета: ≥ 4.5:1 на фоне, поверхностях и --x-soft
                в обеих темах (в светлой теме — тёмный вариант);
     --x-soft / --x-line   подложка и рамка бейджей, чипов, плашек.
   --ink-4 — только декор (иконки-заглушки, разделители, скроллбар). Для любого
   текста — не светлее --ink-3.
   ========================================================================== */

:root {
  /* — акценты — */
  --primary:        oklch(0.70 0.180 38);
  --primary-hover:  oklch(0.76 0.170 38);
  --primary-soft:   oklch(0.70 0.180 38 / .18);
  --primary-dim:    oklch(0.70 0.180 38 / .08);
  --primary-line:   oklch(0.70 0.180 38 / .35);
  --primary-ink:    oklch(0.76 0.150 42);
  --cyan:           oklch(0.82 0.140 220);
  --cyan-soft:      oklch(0.82 0.140 220 / .16);
  --cyan-line:      oklch(0.82 0.140 220 / .35);
  --cyan-ink:       oklch(0.82 0.140 220);
  --green:          oklch(0.72 0.180 145);
  --green-soft:     oklch(0.72 0.180 145 / .16);
  --green-line:     oklch(0.72 0.180 145 / .35);
  --green-ink:      oklch(0.76 0.170 145);
  --green-fade:     oklch(0.72 0.180 145 / 0);
  --red:            oklch(0.65 0.200 25);
  --red-hover:      oklch(0.70 0.200 25);
  --red-soft:       oklch(0.65 0.200 25 / .16);
  --red-line:       oklch(0.65 0.200 25 / .35);
  --red-ink:        oklch(0.74 0.160 25);
  --red-glow:       oklch(0.65 0.200 25 / .65);
  --red-glow-strong: oklch(0.65 0.200 25 / .80);
  --red-halo:       oklch(0.65 0.200 25 / .10);
  --red-halo-strong: oklch(0.65 0.200 25 / .16);
  --danger-line:    oklch(0.65 0.200 25 / .45);
  --amber:          oklch(0.80 0.150 85);
  --amber-soft:     oklch(0.80 0.150 85 / .16);
  --amber-line:     oklch(0.80 0.150 85 / .35);
  --amber-ink:      oklch(0.82 0.140 85);

  /* текст поверх сплошной заливки акцентом (кнопки) */
  --on-primary:     oklch(0.15 0.020 38);
  --on-red:         oklch(0.16 0.020 25);

  /* не-текстовые акценты, которым нужен контраст ≥ 3:1: обводка фокуса,
     полоса прогресса, рамка строки «требует внимания» */
  --primary-strong: var(--primary);
  --focus:          var(--primary-strong);
  --attention-line: var(--amber);

  /* — поверхности (тёмная тема по умолчанию) — */
  --bg:        oklch(0.10 0.005 30);
  --surface:   oklch(0.15 0.007 30);
  --surface-2: oklch(0.18 0.008 30);
  --line:      oklch(0.22 0.008 30);
  --line-2:    oklch(0.28 0.010 30);

  /* — текст — */
  --ink:   oklch(0.97 0.005 80);
  --ink-2: oklch(0.78 0.008 60);
  --ink-3: oklch(0.68 0.010 50);
  --ink-4: oklch(0.40 0.010 40);   /* только декор */

  /* — плёнки — */
  --tint-1: oklch(1 0 0 / .025);
  --tint-2: oklch(1 0 0 / .045);
  --tint-3: oklch(1 0 0 / .065);
  --tint-strong: oklch(1 0 0 / .085);

  /* — стекло / тени / градиенты / подложки — */
  --glass-nav:    oklch(0.130 0.006 30 / .92);
  --glass-strong: oklch(0.150 0.007 30 / .85);
  --nav-scrolled-bg:     oklch(0.130 0.006 30 / .55);
  --nav-scrolled-shadow: 0 12px 32px -14px oklch(0.05 0.005 30 / .85);
  --toolbar-stuck-bg:    oklch(0.150 0.007 30 / .62);
  --shadow:       0 30px 60px -20px oklch(0.05 0.005 30 / .6);
  --shadow-sm:    0 8px 24px -12px oklch(0.05 0.005 30 / .7);
  --grad-card:    linear-gradient(180deg, oklch(0.130 0.006 30), oklch(0.090 0.005 30));
  --bg-glow-1:    oklch(0.70 0.180 38 / .10);
  --bg-glow-2:    oklch(0.82 0.140 220 / .06);
  --backdrop:     oklch(0.050 0.005 30 / .92);

  /* — геометрия — */
  --container: 1280px;
  --radius-s: 8px;
  --radius:   14px;
  --radius-l: 24px;
  --ease: cubic-bezier(.2,.7,.2,1);

  color-scheme: dark;
}

/* ————— светлая тема ————— */
[data-theme="light"] {
  --primary-soft: oklch(0.70 0.180 38 / .12);
  --primary-dim:  oklch(0.70 0.180 38 / .10);
  --primary-line: oklch(0.62 0.170 38 / .40);
  --primary-ink:  oklch(0.49 0.140 40);
  --cyan-soft:    oklch(0.82 0.140 220 / .14);
  --cyan-line:    oklch(0.60 0.110 225 / .40);
  --cyan-ink:     oklch(0.47 0.095 232);
  --green-soft:   oklch(0.72 0.180 145 / .14);
  --green-line:   oklch(0.58 0.150 145 / .40);
  --green-ink:    oklch(0.46 0.120 148);
  --red-soft:     oklch(0.65 0.200 25 / .12);
  --red-line:     oklch(0.58 0.190 25 / .40);
  --red-ink:      oklch(0.49 0.180 27);
  --amber-soft:   oklch(0.80 0.150 85 / .18);
  --amber-line:   oklch(0.62 0.130 80 / .45);
  --amber-ink:    oklch(0.47 0.100 68);
  --danger-line:  oklch(0.58 0.190 25 / .45);

  --primary-strong: var(--primary-ink);
  --attention-line: oklch(0.62 0.130 80);

  --bg:        oklch(0.985 0.003 80);
  --surface:   oklch(0.955 0.005 80);
  --surface-2: oklch(0.925 0.006 80);
  --line:      oklch(0.88 0.007 60);
  --line-2:    oklch(0.80 0.010 60);

  --ink:   oklch(0.20 0.012 30);
  --ink-2: oklch(0.40 0.010 30);
  --ink-3: oklch(0.49 0.012 30);
  --ink-4: oklch(0.70 0.010 30);   /* только декор */

  --tint-1: oklch(0 0 0 / .025);
  --tint-2: oklch(0 0 0 / .045);
  --tint-3: oklch(0 0 0 / .07);
  --tint-strong: oklch(0 0 0 / .09);

  --glass-nav:    oklch(0.985 0.003 80 / .88);
  --glass-strong: oklch(0.955 0.005 80 / .85);
  --nav-scrolled-bg:     oklch(0.985 0.003 80 / .62);
  --nav-scrolled-shadow: 0 12px 32px -14px oklch(0.20 0.02 30 / .22);
  --toolbar-stuck-bg:    oklch(0.955 0.005 80 / .62);
  --shadow:       0 30px 60px -20px oklch(0.20 0.02 30 / .14);
  --shadow-sm:    0 8px 24px -12px oklch(0.20 0.02 30 / .14);
  --grad-card:    linear-gradient(180deg, oklch(0.965 0.005 80), oklch(0.985 0.003 80));
  --backdrop:     oklch(0.18 0.01 30 / .42);

  color-scheme: light;
}

/* ————— метрически подогнанные фолбэки шрифтов —————
   Пока грузятся веб-шрифты, страница уже стоит на своих местах —
   при подмене нет скачка вёрстки. Приём взят с лендинга. */
@font-face { font-family:'Inter-fb';        src:local('Arial');       size-adjust:107.40%; ascent-override:90%;  descent-override:22.43%; line-gap-override:0%; }
@font-face { font-family:'SpaceGrotesk-fb'; src:local('Arial');       size-adjust:96.93%;  ascent-override:99.06%; descent-override:25.81%; line-gap-override:0%; }
@font-face { font-family:'JBMono-fb';       src:local('Courier New'); size-adjust:105%;    ascent-override:100%; descent-override:27%;    line-gap-override:0%; }

:root {
  --font-body:    'Inter','Inter-fb',system-ui,-apple-system,sans-serif;
  --font-display: 'Space Grotesk','SpaceGrotesk-fb',sans-serif;
  --font-mono:    'JetBrains Mono','JBMono-fb',ui-monospace,monospace;
}