/* ============================================================
   EVrace — theme.css: light (:root) + dark (delta) + arcade
   Роли — канон пользователя / accent-preview.html.
   Компоненты читают ТОЛЬКО эти переменные.
   ============================================================ */

/* LIGHT = дефолт без атрибута и при [data-theme=light] */
:root,
html[data-theme="light"] {
  --bg: var(--c-n120);
  --surface: var(--c-n0);
  --surface-2: var(--c-n75);
  --surface-3: var(--c-n140);
  --fg: var(--c-n900);
  --fg-2: var(--c-n600);
  --fg-3: var(--c-n500);
  --fg-4: var(--c-n400);
  --hairline: var(--c-n170);
  --hairline-2: var(--c-n150);
  --accent: var(--acc);
  --accent-hov: var(--acc-600);
  --accent-fg: #fff;
  --accent-bg: color-mix(in srgb, var(--acc) 12%, transparent);
  --on-brand: #fff;
  --dc: var(--c-dc);
  --ac: var(--c-ac);
  --ok: var(--c-ok);
  --warn: var(--c-warn);
  --err: var(--c-err);
  --radius-card: var(--radius-6);
  --radius-control: var(--radius-5);
  --radius-chip: var(--radius-pill);
  --shadow-card: 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-raise: 0 6px 20px rgba(0, 0, 0, 0.10);
  --shadow-press: inset 0 2px 5px rgba(0, 0, 0, 0.20);
  --shadow-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.30);
  --font: "IBM Plex Sans", system-ui, sans-serif;
  --font-display: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --op-tint: 12%;
  --op-lift: 0%;
  /* хвосты переезда — пачка 0: объявлены, ещё не читаются слоем 3 */
  --overlay: rgba(0, 0, 0, 0.6);
  --focus-ring: rgba(91, 157, 255, 0.22);
  --live-free: var(--c-ok);
  --live-busy: var(--c-err);
  --live-charging: #5b9cf5;
  --live-idle: #888888;
  --map-cluster: #0078d4;
  --nar-status: #d14dff;
  --nar-rival: #ff6b35;
  --nar-air: #00e5ff;
  --nar-text: #00e535;
  --tg: #2aabee;
  color-scheme: light;
}

/* DARK = дельта (роли, что меняются) */
html[data-theme="dark"] {
  --bg: var(--c-n980);
  --surface: var(--c-n850);
  --surface-2: var(--c-n820);
  --surface-3: var(--c-n750);
  --fg: var(--c-n50);
  --fg-2: var(--c-n400);
  --fg-3: var(--c-n500);
  --fg-4: var(--c-n600);
  --hairline: var(--c-n840);
  --hairline-2: var(--c-n700);
  --accent: var(--acc-300);
  --accent-hov: var(--acc);
  --accent-fg: #0b0c11;
  --accent-bg: color-mix(in srgb, var(--acc-300) 18%, transparent);
  --on-brand: #fff;
  --dc: var(--c-dc-400);
  --ac: var(--c-ac-400);
  --ok: var(--c-ok-400);
  --warn: var(--c-warn-400);
  --err: var(--c-err-400);
  --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-raise: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-press: inset 0 2px 5px rgba(0, 0, 0, 0.35);
  --shadow-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --op-tint: 20%;
  --op-lift: 22%;
  --overlay: rgba(0, 0, 0, 0.6);
  --focus-ring: rgba(91, 157, 255, 0.22);
  --live-free: var(--c-ok-400);
  --live-busy: var(--c-err-400);
  --live-charging: #5b9cf5;
  --live-idle: #9aa0a6;
  --map-cluster: #00bcd4;
  --nar-status: #d14dff;
  --nar-rival: #ff6b35;
  --nar-air: #00e5ff;
  --nar-text: #00e535;
  --tg: #2aabee;
  color-scheme: dark;
}

/* ARCADE — роли 1:1 по смыслу из CSS/arcade.css :root + accent-preview
   Акцент аркады = зелёный неон ВСЕГДА (teal не подставлять). */
html[data-theme="arcade"] {
  --bg: #0a0a0a;
  --surface: #0d1f0d;
  --surface-2: #0f2a0f;
  --surface-3: #123512;
  --fg: #00ff41;
  --fg-2: #00aa2b;
  --fg-3: #008a22;
  --fg-4: #006618;
  --hairline: #1a3a1a;
  --hairline-2: #0d1a0d;
  --accent: #00ff41;
  --accent-hov: #66ff88;
  --accent-fg: #0a0a0a;
  --accent-bg: rgba(0, 255, 65, 0.14);
  --on-brand: #fff; /* solid brand chips — белый текст на заливке */
  --dc: #ffd700;
  --ac: #00cfff;
  --ok: #00ff41;
  --warn: #ffaa00;
  --err: #ff4444;
  --radius-card: var(--radius-0);
  --radius-control: var(--radius-0);
  --radius-chip: var(--radius-0);
  --shadow-card: 0 0 0 1px rgba(0, 255, 65, 0.14);
  --shadow-raise: 0 0 18px rgba(0, 255, 65, 0.18);
  --font: "Share Tech Mono", monospace;
  --font-display: "Press Start 2P", monospace;
  --font-mono: "Share Tech Mono", monospace;
  --op-tint: 15%;
  --op-lift: 40%;
  --overlay: rgba(0, 0, 0, 0.6);
  --focus-ring: rgba(91, 157, 255, 0.22);
  --live-free: #00ff41;
  --live-busy: #ff4444;
  --live-charging: #5b9cf5;
  --live-idle: #666666;
  --map-cluster: #00ff41;
  --nar-status: #d14dff;
  --nar-rival: #ff6b35;
  --nar-air: #00e5ff;
  --nar-text: #00e535;
  --tg: #2aabee;
  /* аркада: терминальная текстовая шкала (читаемее, всё ещё плотно) */
  --t-body-lg: 15px;
  --t-body: 14px;
  --t-label: 13px;
  --t-caption: 12px;
  /* Press Start 2P крупнее обычного — режем display-шкалу */
  --d-h3: clamp(14px, 3vw, 18px);
  --d-h2: clamp(16px, 3.5vw, 24px);
  --d-h1: clamp(20px, 4vw, 32px);
  --d-hero: clamp(28px, 6vw, 44px);
  /* season (из arcade.css :root) */
  --winter: #00e5ff;
  --spring: #aaff00;
  --summer: #ff44aa;
  --autumn: #ffaa00;
  color-scheme: dark;
}

/* Legacy aliases (chrome / home-v2 / JS). Этап 7 — пока живут старые имена. */
:root,
html[data-theme="light"],
html[data-theme="dark"],
html[data-theme="arcade"] {
  --green: var(--accent);
  --green-dim: var(--fg-2);
  --green-dark: var(--hairline);
  --yellow: var(--dc);
  --cyan: var(--ac);
  --dc-bg: color-mix(in srgb, var(--dc) 14%, transparent);
  --ac-bg: color-mix(in srgb, var(--ac) 12%, transparent);
  --red: var(--err);
  --text: var(--fg);
  --text-dim: var(--fg-3);
  --muted: var(--fg-3);
  --card-bg: var(--surface);
  --bg-dark: var(--bg);
  --border-strong: var(--accent);
  --border: var(--hairline);
  --border-dim: var(--hairline);
  --border-faint: var(--hairline-2);
  --border-hairline: var(--hairline-2);
  --home-text: var(--fg);
  --home-text-mid: var(--fg-2);
  --home-text-dim: var(--fg-3);
  --home-card: var(--surface);
  --home-bdr: var(--hairline);
  --home-bg-glow: var(--accent-bg);
  --statusbar-bg: color-mix(in srgb, var(--surface) 86%, transparent);
  --statusbar-h: 56px;
  --r-s: var(--radius-control);
  --r: var(--radius-card);
  --r-l: var(--radius-card);
  --shadow-1: var(--shadow-card);
  --shadow-2: var(--shadow-raise);
  --shadow-pop: var(--shadow-raise);
  --bar-bg: color-mix(in srgb, var(--surface) 92%, transparent);
  --bar-border: var(--hairline);
  --bar-top-line: transparent;
  --bar-fg-dim: var(--fg-3);
  --bar-fg-active: var(--accent);
  --bar-active-bg: var(--accent-bg);
  --bar-shadow: var(--shadow-raise);
  --bar-label-font: var(--font);
  --bar-width: min(92vw, 480px);
  --bar-width-compact: min(68vw, 320px);
}

/* light/dark: бар заметнее на фоне страницы (arcade — свой контраст) */
:root,
html[data-theme="light"] {
  --bar-border: color-mix(in srgb, var(--fg) 22%, transparent);
  --bar-shadow:
    0 6px 24px rgba(0, 0, 0, 0.12),
    0 0 0 1px color-mix(in srgb, var(--fg) 10%, transparent);
}
html[data-theme="dark"] {
  --bar-border: color-mix(in srgb, var(--fg) 30%, transparent);
  --bar-shadow:
    0 8px 28px rgba(0, 0, 0, 0.55),
    0 0 0 1px color-mix(in srgb, var(--fg) 16%, transparent);
}

/* Бренд → локальная --c (единственное место прямого --brand-*) */
.op-bf { --c: var(--brand-bf); --op-color: var(--c); }
.op-fo { --c: var(--brand-fo); --op-color: var(--c); }
.op-za { --c: var(--brand-za); --op-color: var(--c); }
.op-uc { --c: var(--brand-uc); --op-color: var(--c); }
.op-cs { --c: var(--brand-cs); --op-color: var(--c); }
.op-ma { --c: var(--brand-ma); --op-color: var(--c); }
.op-ev { --c: var(--brand-ev); --op-color: var(--c); }
.op-or { --c: var(--brand-or); --op-color: var(--c); }
.op-pr { --c: var(--brand-pr); --op-color: var(--c); }
.op-eo { --c: var(--brand-eo); --op-color: var(--c); }
.op-on { --c: var(--brand-on); --op-color: var(--c); }
.op-sk { --c: var(--brand-sk); --op-color: var(--c); }
/* Партнёры без своего бренда (в т.ч. gto / Белтехосмотр) */
.op-other { --c: var(--fg-4); --op-color: var(--c); }