/* ============================================================================
   gsv-tokens.css — GSV DESIGN SYSTEM · "Control Room v2" · TOKEN CONTRACT
   ----------------------------------------------------------------------------
   THE reusable, framework-neutral core of the new design language. Defines ONLY
   CSS custom properties (+ the global backdrop, focus ring, selection).
   Component styling lives in gsv-redesign.css.

   FAN-OUT (all 6 GSV panels share this file byte-for-byte):
     · 5 sub-panels (games/db/web/vps/ki): load this + gsv-redesign.css AFTER
       gsv-theme.css. Per panel change ONLY --accent (+ --accent-text) in that
       panel's gsv-theme.css — everything else derives here.
     · main panel (Vue): can @import this file to adopt the same tokens.

   ACCENT IS THE ONLY PER-PANEL VALUE. Every tint/glow/gradient/ring — AND the
   two harmonious secondary hues (--accent-2/-3, hue-rotated via relative color)
   — derive from --accent. So the system looks vividly multi-colored yet each
   panel is self-branded with zero per-panel values.
   games=#7c5cf0 · db=#ffb454 · web=#2ee6a6 · vps=#39c0ff · ki=#4d9fff
   ============================================================================ */
:root{
  /* ---- Geometry ---- */
  --radius:12px; --radius-sm:9px; --radius-lg:16px; --radius-pill:999px; --radius-btn:10px;
  --sidebar-w:230px;

  /* ---- Density scale (v2 — tighter, "dashboard" rhythm) ---- */
  --pad-page-y:18px; --pad-page-x:22px;
  --pad-card:15px; --pad-card-tight:12px;
  --gap-lg:14px; --gap-md:12px; --gap-sm:8px;

  /* ---- Surfaces / ink — graphite auto-tinted a whisper of --accent so each
         panel self-brands (part of the "more color" direction) ---- */
  --bg:color-mix(in srgb,var(--accent) 4%,#070911);
  --bg-elev:color-mix(in srgb,var(--accent) 4%,#0b0e18);
  --surface:color-mix(in srgb,var(--accent) 5%,#101320);
  --surface-2:color-mix(in srgb,var(--accent) 5%,#171b2b);
  --surface-3:color-mix(in srgb,var(--accent) 7%,#1f2437);   /* hover / raised */
  --border:color-mix(in srgb,var(--accent) 9%,#222840);
  --border-2:color-mix(in srgb,var(--accent) 13%,#2e3654);   /* stronger hairline */
  --line:color-mix(in srgb,var(--accent) 7%,#1a1f31);        /* faint separators */

  --text:#eef1fb;
  --text-dim:#9aa3c1;
  --text-faint:#616a88;

  /* alias tokens some inline styles reference (were falling back to hardcoded) */
  --fg:var(--text);
  --dim:var(--text-dim);
  --mono:var(--font-mono);

  /* ---- Semantic status — vivid, legible ---- */
  --danger:#ff6b81; --ok:#36d9a0; --warn:#ffc24d; --info:#5aa8ff;
  --ok-soft:color-mix(in srgb,var(--ok) 17%,transparent);
  --warn-soft:color-mix(in srgb,var(--warn) 17%,transparent);
  --danger-soft:color-mix(in srgb,var(--danger) 17%,transparent);
  --info-soft:color-mix(in srgb,var(--info) 17%,transparent);
  --ok-line:color-mix(in srgb,var(--ok) 40%,transparent);
  --warn-line:color-mix(in srgb,var(--warn) 40%,transparent);
  --danger-line:color-mix(in srgb,var(--danger) 42%,transparent);
  --info-line:color-mix(in srgb,var(--info) 40%,transparent);

  /* ---- Accent core — derived from --accent (set per panel) ---- */
  --accent-hover:color-mix(in srgb,var(--accent) 70%,#ffffff);
  --accent-press:color-mix(in srgb,var(--accent) 84%,#000000);
  --accent-fill:color-mix(in srgb,var(--accent) 90%,#000000);   /* button base → AA text */
  --accent-soft:color-mix(in srgb,var(--accent) 18%,transparent);
  --accent-softer:color-mix(in srgb,var(--accent) 10%,transparent);
  --accent-line:color-mix(in srgb,var(--accent) 45%,transparent);
  --accent-edge:color-mix(in srgb,var(--accent) 28%,transparent);
  /* --accent-text comes from each panel's gsv-theme.css (games = #fff) */

  /* ---- SECONDARY HUES — harmonious, hue-rotated from --accent via relative
         color (progressive: falls back to --accent on old engines). This is
         what makes the system read as multi-colored while staying on-brand. */
  --accent-2:var(--accent);
  --accent-2:oklch(from var(--accent) l calc(c * 1.12) calc(h + 44));
  --accent-3:var(--accent);
  --accent-3:oklch(from var(--accent) l calc(c * 1.12) calc(h - 44));
  --accent-2-soft:color-mix(in srgb,var(--accent-2) 18%,transparent);
  --accent-3-soft:color-mix(in srgb,var(--accent-3) 18%,transparent);

  /* Multi-hue sheen: accent-3 → accent → accent-2 (adapts per panel). */
  --aurora-grad:linear-gradient(120deg,var(--accent-3) 0%,var(--accent) 52%,var(--accent-2) 100%);
  --aurora-vivid:linear-gradient(125deg,var(--accent-3) 0%,var(--accent) 46%,var(--accent-2) 100%);
  --aurora-soft:linear-gradient(135deg,var(--accent-3-soft),var(--accent-2-soft));
  --aurora-glow:0 0 34px color-mix(in srgb,var(--accent) 38%,transparent);

  /* glass tuned to the crisper surfaces */
  --glass-bg:color-mix(in srgb,var(--bg-elev) 78%,transparent);
  --glass-elev:color-mix(in srgb,var(--bg-elev) 82%,transparent);
  --glass-strong:color-mix(in srgb,var(--surface-2) 90%,transparent);
  --glass-opaque:color-mix(in srgb,var(--accent) 3%,#0b0e18);
  --glass-opaque-2:color-mix(in srgb,var(--accent) 3%,#090c15);
  --glass-border:var(--border);
  --glass-border-bright:var(--border-2);

  /* ---- Elevation / focus / motion (v2 — richer, "edel" depth at key spots) ---- */
  --card-top:inset 0 1px 0 rgba(255,255,255,.06);
  --shadow:0 26px 64px -30px rgba(0,0,0,.75),0 3px 12px -5px rgba(0,0,0,.55);
  --shadow-sm:0 6px 18px -10px rgba(0,0,0,.6);
  --shadow-accent:0 14px 34px -12px color-mix(in srgb,var(--accent) 66%,transparent);
  --glow-accent:0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent),0 10px 34px -10px color-mix(in srgb,var(--accent) 50%,transparent);
  --glow-multi:0 12px 40px -12px color-mix(in srgb,var(--accent) 45%,transparent),0 0 60px -20px color-mix(in srgb,var(--accent-2) 40%,transparent);
  --ring:0 0 0 2px var(--bg),0 0 0 4px color-mix(in srgb,var(--accent) 68%,transparent);
  --tr:140ms cubic-bezier(.2,.6,.2,1);
}

/* ---- Global backdrop: telemetry dot-grid + a richer multi-hue accent glow ---- */
body{
  background:
    radial-gradient(1100px 620px at 100% -12%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 60%),
    radial-gradient(820px 560px at -6% 108%,color-mix(in srgb,var(--accent-2) 12%,transparent),transparent 60%),
    radial-gradient(700px 520px at 55% 118%,color-mix(in srgb,var(--accent-3) 8%,transparent),transparent 62%),
    var(--bg);
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(150,164,214,.06) 1px,transparent 0);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(135% 95% at 50% 0%,#000 36%,transparent 100%);
  mask-image:radial-gradient(135% 95% at 50% 0%,#000 36%,transparent 100%);
}
::selection{background:color-mix(in srgb,var(--accent) 45%,transparent);color:#fff}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 30%,transparent)}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--accent) 48%,transparent)}

/* Global visible focus ring (a11y) — keyboard nav only */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,.nav-i:focus-visible,.deck-nav-i:focus-visible,
.tab:focus-visible,.qa:focus-visible,.stat:focus-visible,.catchip:focus-visible,.chip:focus-visible,
.gamecard:focus-visible,.icon-btn:focus-visible,.user-chip:focus-visible{
  outline:none;box-shadow:var(--ring);border-radius:var(--radius-sm);position:relative;z-index:2;
}