/* ============================================================================
   os-v3-tokens.css — SXMeets Desktop OS v3 design tokens (SHARED CHASSIS)
   ----------------------------------------------------------------------------
   Source of truth: frontend/sxmeets/Providers/Mobile/<os>-mobile-v3.html +
   the mockups/<os>-desktop-v3-redesign.html files. Extracted verbatim from
   fleet-desktop-v3-redesign.html (the most complete mockup) and NEUTRALIZED:
   per-OS accent is NOT defined here — each desktop file supplies its own
   accent trio + bg in an 8-line :root override (see README.md §"Skin a new OS").

   Layer 1 of 2. Pair with os-v3-chassis.css.
   Load order in each desktop:
       <link rel="stylesheet" href="/os/_shared/os-v3-tokens.css">
       <link rel="stylesheet" href="/os/_shared/os-v3-chassis.css">
       <style>:root{ --accent:…; --accent-deep:…; --accent-glow:…; --bg:…; }</style>

   DO NOT add per-OS color here. Color drift = the bug this chassis kills.
   ============================================================================ */

:root {
  /* ── Surface ramp (dark, default). Per-OS files MAY override --bg (and may
     re-tint the surface ramp for warm palettes); most use these as-is. ────── */
  --bg:#0F1218;
  --surface:#181C24;
  --surface-2:#232734;
  --surface-3:#2E3340;

  /* ── Hairlines — NEUTRAL (accent-agnostic) so every palette reads cleanly.
     A per-OS file may re-tint these to its accent family if it wants. ─────── */
  --line:rgba(255,255,255,.06);
  --line-2:rgba(255,255,255,.12);

  /* ── Ink ramp ──────────────────────────────────────────────────────────── */
  --ink:#EDF2F8;
  --ink-2:#A8B4C4;
  --ink-3:#6B7585;
  --ink-on-accent:#0E0E0E;   /* per-OS override for dark-on-light accents */

  /* Text aliases — LITERAL (not var(--ink)) so legacy files that already use the
     name --ink for their BACKGROUND can reference --fg/--fg-2/--fg-3 for
     theme-aware TEXT without the shadowing collision. See README "Brownfield". */
  --fg:#EDF2F8; --fg-2:#A8B4C4; --fg-3:#6B7585;

  /* ── Accent — FALLBACK ONLY. Each desktop MUST override the trio below.
     Neutral slate so an un-skinned file is still legible (never ships). ───── */
  --accent:#8A9AAB;
  --accent-deep:#6B7585;
  --accent-glow:rgba(138,154,171,.18);

  /* ── Semantic status colors (shared across all OS) ─────────────────────── */
  --online:#34D399; --online-deep:#10B981;
  --offline:#6B7585;
  --alert:#F87171;  --alert-deep:#EF4444;
  --warn:#FBBF24;
  --info:#6FA9D1;

  /* ── Hero gradients — neutral defaults; per-OS files override for mode tints.
     The chassis hero structure reads these three. ────────────────────────── */
  --hero-offline:linear-gradient(135deg,#181C24 0%,#232734 100%);
  --hero-idle:linear-gradient(135deg,#1A2030 0%,#232C40 50%,#2C3A56 100%);
  --hero-surge:linear-gradient(135deg,#2A1F0A 0%,#3E2E14 50%,#5A4420 100%);

  /* ── Map tokens (chassis standard — neutral blue-grey; OS with maps may
     re-tint). Fleet/Transit/Terra use these. ─────────────────────────────── */
  --map-water:#0A1218; --map-land-fr:#1B2734; --map-land-nl:#1F2B38;
  --map-coast:#2E3C4C; --map-road-1:rgba(255,255,255,.085); --map-road-2:rgba(255,255,255,.05);
  --map-border:#5E6D7D; --map-label:#8A9AAB; --map-label-dim:#59697A;

  /* ── Radii ─────────────────────────────────────────────────────────────── */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;

  /* ── Shadows ───────────────────────────────────────────────────────────── */
  --shadow-sm:0 1px 2px rgba(0,0,0,.2);
  --shadow-md:0 4px 14px rgba(0,0,0,.28);
  --shadow-lg:0 18px 48px rgba(0,0,0,.45);

  /* ── Typography ────────────────────────────────────────────────────────── */
  --font:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;

  /* ── Layout metrics ────────────────────────────────────────────────────── */
  --sb-w:248px;

  font-feature-settings:'tnum';
}

/* ── LIGHT THEME ─────────────────────────────────────────────────────────── */
:root[data-theme="light"] {
  --bg:#F2F4F8;
  --surface:#FFFFFF;
  --surface-2:#EDF0F5;
  --surface-3:#DDE2EC;
  --line:rgba(30,40,60,.07);
  --line-2:rgba(30,40,60,.14);
  --ink:#0F1420;
  --ink-2:#3D4A5C;
  --ink-3:#7A8498;
  --fg:#0F1420; --fg-2:#3D4A5C; --fg-3:#7A8498;
  --accent-glow:rgba(138,154,171,.22);
  --hero-offline:linear-gradient(135deg,#DDE2EC 0%,#EDF0F5 100%);
  --hero-idle:linear-gradient(135deg,#C9D6E6 0%,#9DB6D2 50%,#6E92BC 100%);
  --hero-surge:linear-gradient(135deg,#FFE3B8 0%,#FFCA82 50%,#FFA945 100%);
  --map-water:#C7DAE6; --map-land-fr:#F3E9D4; --map-land-nl:#F0E4C8;
  --map-coast:#B5A88E; --map-road-1:rgba(60,40,20,.18); --map-road-2:rgba(60,40,20,.10);
  --map-border:#8A7A5C; --map-label:#4A4030; --map-label-dim:#8A7E68;
  --shadow-sm:0 1px 2px rgba(20,30,50,.08);
  --shadow-md:0 4px 14px rgba(20,30,50,.10);
  --shadow-lg:0 18px 48px rgba(20,30,50,.18);
}

/* ── WARM dark surface ramp (opt-in) ─────────────────────────────────────────
   Warm-accent OS (venue/restos/terra/beauty/wellness) read cooler than their
   accent on the default blue-grey ramp. Add data-surface="warm" to <html> to
   carry warmth into surfaces. Per-OS files may instead override --surface* in
   their own :root if they want a hue tuned to their exact accent. Dark only —
   light theme stays neutral. */
:root[data-theme="dark"][data-surface="warm"],
:root[data-surface="warm"]:not([data-theme="light"]) {
  --surface:#1C1813; --surface-2:#27211A; --surface-3:#332B21;
}

/* ── Base reset (shared) ─────────────────────────────────────────────────── */
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  background:var(--bg); color:var(--ink); font-family:var(--font);
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
  font-feature-settings:'cv11','ss01','tnum';
  min-height:100vh;
}
.mono,.val,.num,.lab,.sub,.meta,.delta,.kpi-val { font-variant-numeric:tabular-nums; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--surface-3); border-radius:8px; border:3px solid var(--bg); }
svg { display:block; }