/* -----------------------------------------------------------------------------
   VALEON — design tokens
   Source of truth: Valeon Visual Style Guide v1.0
   Any change here must respect that document, particularly §1 (the one hard
   rule), §2 (colour), and §9 (UI is desaturated, thin, technical).
   -------------------------------------------------------------------------- */

:root {
  /* ----- Environment (§2.1) — near-black, cool, deliberately dull ------- */
  --void:            #050812;   /* Camera clear, page background */
  --void-lift:       #070B1A;   /* Subtle vertical gradient stop */
  --grid-line:       #0E1626;   /* Barely there until Overdrive */
  --grid-line-warm:  #1A2440;   /* Slightly lifted, for stars & chrome */
  --chrome-lo:       #0E1626;   /* UI chrome low */
  --chrome-hi:       #1A2440;   /* UI chrome high */

  /* ----- The seven families (§2.2) — exact hex from the guide ---------- */
  --plasma:  #FF298C;   /* hot pink       — Diamond            */
  --cryo:    #33E6FF;   /* electric cyan  — Octagon flat top   */
  --void-f:  #994DFF;   /* ultraviolet    — Triangle           */
  --ion:     #9EFF33;   /* acid green     — Bolt               */
  --solar:   #FF8C1F;   /* burnt orange   — Eight-point star   */
  --quantum: #F0F5FF;   /* near-white     — Hollow hex ring    */
  --aurora:  #33FAD1;   /* turquoise      — Sharp four-point   */

  /* ----- Text ---------------------------------------------------------- */
  --ink-hi:  #E8ECF7;   /* Primary text, desaturated near-white */
  --ink-mid: #A8B0C7;   /* Secondary UI text */
  --ink-lo:  #5A6485;   /* Tertiary / captions */
  --ink-dim: #2A3350;   /* Dividers, disabled */

  /* ----- Type (§9) — geometric sans, wide tracking --------------------- */
  --font-display: "Orbitron", "Rajdhani", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Rajdhani", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;

  --track-tight: 0.02em;
  --track-wide:  0.12em;
  --track-huge:  0.32em;

  /* ----- Rhythm --------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-4: 14px;

  /* ----- Motion --------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-both: cubic-bezier(0.83, 0, 0.17, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --dur-4: 720ms;

  /* ----- Glow (§4 charge treatment) ------------------------------------ */
  /* A shard's brightness is the family colour projected outward, never a
     coloured shadow behind a flat sprite. Use these as inner + outer pairs. */
  --glow-plasma:  0 0 8px #FF298C, 0 0 24px rgba(255, 41, 140, 0.55);
  --glow-cryo:    0 0 8px #33E6FF, 0 0 24px rgba(51, 230, 255, 0.55);
  --glow-void:    0 0 8px #994DFF, 0 0 24px rgba(153, 77, 255, 0.55);
  --glow-ion:     0 0 8px #9EFF33, 0 0 24px rgba(158, 255, 51, 0.55);
  --glow-solar:   0 0 8px #FF8C1F, 0 0 24px rgba(255, 140, 31, 0.55);
  --glow-quantum: 0 0 8px #F0F5FF, 0 0 24px rgba(240, 245, 255, 0.55);
  --glow-aurora:  0 0 8px #33FAD1, 0 0 24px rgba(51, 250, 209, 0.55);

  /* ----- Layout envelope ----------------------------------------------- */
  --page-max: 1240px;
  --nav-h:    80px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
    --dur-4: 0ms;
  }
}