/* ============================================================
   Design tokens.
   Every color, radius, easing and spacing used across the app
   lives here so themes stay consistent.

   Compatibility notes:
   - Besides the hex accents we expose matching RGB triplets
     (--accent-*-rgb). They let us build translucent accents with
     rgba(), which is supported far more widely than color-mix().
   - --radar-rgb is a theme-aware accent used by the radar dial so
     the instrument stays legible on both dark and light surfaces.
   ============================================================ */

:root {
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', var(--font-ui);

  /* Brand spectrum */
  --accent-a: #38e1ff;
  --accent-b: #6d5cff;
  --accent-c: #b44cff;
  --gradient-accent: linear-gradient(135deg, var(--accent-a), var(--accent-b) 55%, var(--accent-c));

  /* RGB triplets for rgba() usage (broad browser support). */
  --accent-a-rgb: 56, 225, 255;
  --accent-b-rgb: 109, 92, 255;
  --accent-c-rgb: 180, 76, 255;

  --success: #34e39a;
  --warning: #ffc861;
  --danger: #ff5d7a;

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --speed-fast: 160ms;
  --speed-med: 280ms;
  --speed-slow: 520ms;

  --node-size: 96px;
  --node-avatar: 62px;
}

[data-theme='dark'] {
  color-scheme: dark;

  --bg-0: #05070f;
  --bg-1: #0a101f;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-strong: rgba(13, 18, 36, 0.86);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);

  --text-1: #eaf0ff;
  --text-2: #9aa6c7;
  --text-3: #5d688a;

  --shadow-1: 0 10px 30px rgba(2, 6, 20, 0.45);
  --shadow-2: 0 24px 80px rgba(2, 6, 20, 0.6);
  --glow: 0 0 26px rgba(96, 126, 255, 0.35);

  /* Radar reads best with the cyan accent on dark surfaces. */
  --radar-rgb: var(--accent-a-rgb);
}

[data-theme='light'] {
  color-scheme: light;

  --bg-0: #edf1fb;
  --bg-1: #f9fbff;
  --surface: rgba(255, 255, 255, 0.66);
  --surface-strong: rgba(255, 255, 255, 0.92);
  --border: rgba(15, 23, 42, 0.09);
  --border-strong: rgba(15, 23, 42, 0.18);

  --text-1: #131a33;
  --text-2: #4c5878;
  --text-3: #8b95b3;

  --shadow-1: 0 10px 30px rgba(30, 45, 90, 0.12);
  --shadow-2: 0 24px 80px rgba(30, 45, 90, 0.18);
  --glow: 0 0 26px rgba(109, 92, 255, 0.28);

  /* Cyan is too faint on light surfaces; use the indigo accent. */
  --radar-rgb: var(--accent-b-rgb);
}