/* ============================================================
   variables.css — Design tokens
   ------------------------------------------------------------
   "Tactical Operator" — sharp, dark, signature corner accents,
   scan-line atmosphere, electric-blue precision with amber
   warnings. Inspired by aerospace HUD, Bloomberg terminals, and
   high-end fighter-jet cockpit interfaces.
   ============================================================ */

:root {
  /* ── Surface stack ──────────────────────────────────────────
     Deeper void, sharper steps. Each level reads as a discrete
     "panel" rather than a soft gradient. */
  --void:         #03060d;
  --bg0:          #060a14;   /* Page canvas */
  --bg1:          #0b1422;   /* Cards */
  --bg2:          #111c30;   /* Inner cells */
  --bg3:          #182542;   /* Hover */
  --bg-elev:      #1c2c4d;   /* Elevated */

  /* ── Accent: electric cyan as primary signal ────────────── */
  --cyan:         #5ee9ff;
  --cyan-bright:  #a4f3ff;
  --cyan-deep:    #0096b3;
  --cyan-dim:     rgba(94, 233, 255, 0.10);
  --cyan-glow:    rgba(94, 233, 255, 0.22);
  --cyan-shadow:  rgba(94, 233, 255, 0.55);

  /* Secondary atmosphere */
  --violet:       #b794ff;
  --violet-dim:   rgba(183, 148, 255, 0.10);
  --violet-glow:  rgba(183, 148, 255, 0.22);

  /* Holographic gradient — chromatic for premium accents */
  --holo: linear-gradient(120deg, #5ee9ff 0%, #b794ff 50%, #ff7e9a 100%);
  --holo-soft: linear-gradient(120deg, rgba(94,233,255,0.18), rgba(183,148,255,0.18), rgba(255,126,154,0.18));

  /* ── Status palette ─────────────────────────────────────── */
  --green:        #3eea9e;
  --green-soft:   rgba(62, 234, 158, 0.08);
  --green-glow:   rgba(62, 234, 158, 0.25);
  --green-shadow: rgba(62, 234, 158, 0.55);

  --amber:        #ffc043;
  --amber-soft:   rgba(255, 192, 67, 0.08);
  --amber-glow:   rgba(255, 192, 67, 0.25);
  --amber-shadow: rgba(255, 192, 67, 0.55);

  --red:          #ff6868;
  --red-soft:     rgba(255, 104, 104, 0.08);
  --red-glow:     rgba(255, 104, 104, 0.25);
  --red-shadow:   rgba(255, 104, 104, 0.60);

  --blue:         #5ba8ff;
  --blue-soft:    rgba(91, 168, 255, 0.08);
  --blue-glow:    rgba(91, 168, 255, 0.22);

  --purple:       var(--violet);

  /* Aliases for compatibility */
  --cyan2:        var(--cyan);
  --mono:         'JetBrains Mono', 'DM Mono', 'Fira Code', monospace;
  --font-condensed: var(--font-display);

  /* ── Text scale ─────────────────────────────────────────── */
  --text:         #e8eef9;
  --text1:        var(--text);
  --text2:        #8b9bb8;
  --text3:        #4a5872;
  --text4:        #2a3450;

  /* ── Borders — thin gradient strokes ────────────────────── */
  --border:       rgba(148, 175, 220, 0.08);
  --border2:      rgba(148, 175, 220, 0.16);
  --border3:      rgba(148, 175, 220, 0.26);
  --border-cyan:  rgba(94, 233, 255, 0.40);
  --border-amber: rgba(255, 192, 67, 0.45);
  --border-red:   rgba(255, 104, 104, 0.50);

  /* ── Bracket / scan colours ─────────────────────────────── */
  --bracket:      rgba(94, 233, 255, 0.55);
  --bracket-dim:  rgba(148, 175, 220, 0.22);
  --scan-line:    rgba(94, 233, 255, 0.65);

  /* ── Typography ─────────────────────────────────────────── */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'DM Mono', 'Fira Code', 'Consolas', monospace;
  --font-display: 'Barlow Condensed', 'Inter Tight', sans-serif;

  --text-xs:    10px;
  --text-sm:    11.5px;
  --text-base:  13px;
  --text-md:    15px;
  --text-lg:    18px;
  --text-xl:    22px;
  --text-2xl:   32px;
  --text-3xl:   48px;
  --text-display: 64px;

  /* ── Spacing (4px base) ─────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   40px;

  /* ── Layout ─────────────────────────────────────────────── */
  --sidebar-width:   216px;
  --topbar-height:   54px;
  --content-gap:     14px;
  --card-padding:    14px 16px;
  --cell-padding:    10px 12px;

  /* ── Radii — sharp tactical edges ───────────────────────── */
  --r-sm:   2px;
  --r-md:   3px;
  --r-lg:   4px;
  --r-pill: 999px;

  /* ── Bracket geometry ───────────────────────────────────── */
  --bracket-size:   14px;
  --bracket-width:  1px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-card:
    0 1px 0 0 rgba(255, 255, 255, 0.03) inset,
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 8px 28px -10px rgba(0, 0, 0, 0.7);
  --shadow-card-hover:
    0 1px 0 0 rgba(255, 255, 255, 0.05) inset,
    0 0 0 1px var(--border-cyan),
    0 0 32px -8px var(--cyan-glow),
    0 14px 36px -12px rgba(0, 0, 0, 0.85);
  --shadow-glow-amber:
    0 0 0 1px var(--border-amber),
    0 0 28px -6px var(--amber-glow);
  --shadow-glow-red:
    0 0 0 1px var(--border-red),
    0 0 32px -4px var(--red-glow),
    0 14px 36px -12px rgba(255, 0, 0, 0.10);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 120ms var(--ease-out);
  --transition-base: 220ms var(--ease-out);
  --transition-slow: 480ms var(--ease-out);
  --gauge-transition: 1100ms var(--ease-in-out);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
    --gauge-transition: 0ms;
  }
}