/* ============================================================================
   BOLT.KYBERS.CA — DESIGN SYSTEM TOKENS
   Mirrors kybers.ca theme.css exactly — same token system, same values.
   Dark is the default. html.dark = dark mode, html.light = light mode.
   No raw hex values anywhere else in the codebase — only these CSS variables.
   ============================================================================ */

/* ── Brand scale (shared) ──────────────────────────────────────────────── */
:root {
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-300: #a5b4fc;
  --brand-400: #818cf8;
  --brand-500: #3d6ef5;
  --brand-600: #1a3fd4;
  --brand-700: #1533b0;
  --brand-800: #10278a;
  --brand-900: #060d1a;

  /* ── Semantic: status ─────────────────────────────────────────────────── */
  --success: #10b981;
  --warning: #f59e0b;
  --error:   #ef4444;

  /* ── Always-white (text on colored backgrounds) ────────────────────────── */
  --text-on-primary: #ffffff;

  /* ── Shadow scale ─────────────────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px 0 rgba(0,0,0,0.18);
  --shadow-md:    0 4px 6px -1px rgba(0,0,0,0.28);
  --shadow-lg:    0 10px 15px -3px rgba(0,0,0,0.38);
  --shadow-xl:    0 20px 25px -5px rgba(0,0,0,0.48);
  --shadow-hover: 0 20px 40px rgba(0,0,0,0.55);
}

/* ============================================================================
   DARK MODE — default
   ============================================================================ */
:root,
html.dark {
  /* Backgrounds — near-black, matching the deep space feel of the design */
  --bg-primary:   #020509;
  --bg-surface:   #060d1a;

  /* Brand accent */
  --primary:       #3d6ef5;
  --primary-hover: #5b83f7;

  /* Text */
  --text-primary: #f0f4ff;
  --text-dim:     #a8b8d8;

  /* Border */
  --border: rgba(255,255,255,0.08);

  /* Background gradient — matches kybers.ca hero */
  --gradient-tl:  #0a1433;
  --gradient-mid: #050a1a;
  --gradient-end: #050812;
  --bg-gradient: linear-gradient(135deg, #0d1b35 14.6%, #1d4ed8 85.4%);

  /* Form card surface */
  --bg-card:     rgba(10, 20, 51, 0.50);
  --border-card: rgba(61, 110, 245, 0.22);

  /* Fonts */
  --font-ui:   'DM Sans', sans-serif;
  --font-data: 'JetBrains Mono', monospace;

  /* Typography scale */
  --text-overline:   10px;
  --text-h1:         clamp(2.5rem, 5vw, 4.5rem);
  --text-h2:         clamp(1.6rem, 2.5vw, 2.75rem);
  --text-body:       0.9375rem;
  --text-caption:    0.6875rem;
  --text-stat:       2rem;
  --text-stat-label: 0.6875rem;

  /* Spacing / radius */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;

  /* Overlays */
  --overlay:       rgba(255,255,255,0.05);
  --overlay-hover: rgba(255,255,255,0.10);

  /* Constellation nodes + lines — same blue family as the energy orb */
  --particle-color:   rgba(80, 130, 245, 0.80);
  --particle-line:    rgba(61, 110, 245, 0.28);
}

/* ============================================================================
   LIGHT MODE
   ============================================================================ */
html.light {
  /* Backgrounds */
  --bg-primary:   #ffffff;
  --bg-surface:   #f2f5fd;

  /* Brand accent */
  --primary:       #1a3fd4;
  --primary-hover: #1533b0;

  /* Text */
  --text-primary: #0a1020;
  --text-dim:     #475778;

  /* Border */
  --border: rgba(0,0,0,0.08);

  /* Background gradient */
  --bg-gradient: linear-gradient(to top right, #ffffff 25%, #e8f0fa 60%, #b8cee6 100%);

  /* Overlays */
  --overlay:       rgba(0,0,0,0.04);
  --overlay-hover: rgba(0,0,0,0.08);

  /* Shadow adjustments for light bg */
  --shadow-sm:    0 1px 2px 0 rgba(0,0,0,0.06);
  --shadow-md:    0 4px 6px -1px rgba(0,0,0,0.08);
  --shadow-lg:    0 10px 15px -3px rgba(0,0,0,0.10);
  --shadow-xl:    0 20px 25px -5px rgba(0,0,0,0.12);
  --shadow-hover: 0 20px 40px rgba(0,0,0,0.12);

  /* Particle network — strong blue */
  --particle-color: rgba(26,63,212,0.60);
  --particle-line:  rgba(26,63,212,0.28);
}