/* ============================================================
   NORTH CLASS — DESIGN TOKENS
   Palette is grounded in real aurora-borealis light: oxygen gives
   the green/teal band, nitrogen gives the violet-blue band, and
   high-altitude oxygen gives the rare magenta-red band. Those three
   emissions are the whole accent system — nothing arbitrary.
   ============================================================ */

:root{
  /* ---- Aurora accents (overridable from CONFIG at runtime) ---- */
  --aurora-green: #35FFC0;
  --aurora-violet: #8B6BFF;
  --aurora-magenta: #FF5FA8;

  --aurora-gradient: linear-gradient(120deg, var(--aurora-violet) 0%, var(--aurora-green) 52%, var(--aurora-magenta) 100%);
  --aurora-gradient-soft: linear-gradient(120deg, color-mix(in srgb, var(--aurora-violet) 60%, transparent), color-mix(in srgb, var(--aurora-green) 60%, transparent) 52%, color-mix(in srgb, var(--aurora-magenta) 60%, transparent) 100%);

  /* ---- Type scale ---- */
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;

  --fs-2xs: 0.7rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.875rem;
  --fs-2xl: 2.5rem;
  --fs-3xl: clamp(2.75rem, 6vw, 5rem);

  /* ---- Spacing ---- */
  --sp-3xs: 0.25rem;
  --sp-2xs: 0.5rem;
  --sp-xs: 0.75rem;
  --sp-sm: 1rem;
  --sp-md: 1.5rem;
  --sp-lg: 2.5rem;
  --sp-xl: 4rem;
  --sp-2xl: 6rem;

  /* ---- Radii & elevation ---- */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: .2s;
  --dur-med: .45s;
  --dur-slow: .8s;

  --container: 1240px;
  --nav-h: 76px;
}

/* ---------------- DARK (default — "polar night") ---------------- */
:root,
:root[data-theme="dark"]{
  --bg: #05060c;
  --bg-alt: #0a0d1b;
  --bg-elevated: #0e1224;

  --ink: #f3f5fb;
  --ink-muted: #a2a8c2;
  --ink-faint: #666d8c;

  --glass-bg: rgba(255,255,255,0.055);
  --glass-bg-strong: rgba(255,255,255,0.095);
  --glass-border: rgba(255,255,255,0.14);
  --glass-highlight: rgba(255,255,255,0.5);
  --glass-shadow: 0 20px 60px -20px rgba(0,0,0,0.6);

  --scrim: rgba(3,4,10,0.72);
  color-scheme: dark;
}

/* ---------------- LIGHT ("polar day") ---------------- */
:root[data-theme="light"]{
  --bg: #eef1fb;
  --bg-alt: #f7f9ff;
  --bg-elevated: #ffffff;

  --ink: #0d1020;
  --ink-muted: #4c5170;
  --ink-faint: #868cab;

  --glass-bg: rgba(255,255,255,0.55);
  --glass-bg-strong: rgba(255,255,255,0.78);
  --glass-border: rgba(20,24,50,0.10);
  --glass-highlight: rgba(255,255,255,0.9);
  --glass-shadow: 0 20px 50px -22px rgba(30,35,80,0.25);

  --scrim: rgba(238,241,251,0.78);
  color-scheme: light;
}