/**
 * Kodex — CSS Custom Properties
 * All design tokens live here. Edit this file to retheme the entire site.
 */
:root {
  /* ─── Core Palette ──────────────────────────────────────────────────────── */
  --color-bg:           #050308;
  --color-bg-soft:      rgba(20, 9, 36, 0.92);
  --color-surface:      rgba(27, 15, 44, 0.78);
  --color-surface-strong: rgba(35, 18, 58, 0.94);
  --color-surface-hover: rgba(48, 22, 76, 0.9);

  /* ─── Border / Line ─────────────────────────────────────────────────────── */
  --color-line:         rgba(155, 71, 247, 0.24);
  --color-line-strong:  rgba(221, 166, 255, 0.32);
  --color-line-faint:   rgba(155, 71, 247, 0.14);

  /* ─── Text ──────────────────────────────────────────────────────────────── */
  --color-text:         #f4ecff;
  --color-text-muted:   rgba(244, 236, 255, 0.68);
  --color-text-dim:     rgba(244, 236, 255, 0.42);

  /* ─── Accent / Brand Purple ─────────────────────────────────────────────── */
  --color-accent:       #9b47f7;
  --color-accent-strong: #c56cff;
  --color-accent-soft:  rgba(155, 71, 247, 0.18);
  --color-accent-glow:  rgba(155, 71, 247, 0.45);

  /* ─── Secondary Accent (Magenta/Pink) ──────────────────────────────────── */
  --color-secondary:    #f72585;
  --color-secondary-soft: rgba(247, 37, 133, 0.18);

  /* ─── Success / Warning / Error ─────────────────────────────────────────── */
  --color-success:      #22d17e;
  --color-warning:      #f7a825;
  --color-error:        #f74747;

  /* ─── Shadows ───────────────────────────────────────────────────────────── */
  --shadow-card:        0 26px 70px rgba(0, 0, 0, 0.52);
  --shadow-accent:      0 0 40px rgba(155, 71, 247, 0.3);
  --shadow-glow:        0 0 60px rgba(155, 71, 247, 0.5);

  /* ─── Typography ────────────────────────────────────────────────────────── */
  --font-body:          "Space Grotesk", system-ui, sans-serif;
  --font-display:       "Orbitron", sans-serif;

  /* ─── Spacing Scale ─────────────────────────────────────────────────────── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;
  --space-3xl:  96px;

  /* ─── Border Radius ─────────────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* ─── Layout ────────────────────────────────────────────────────────────── */
  --max-width:  1120px;
  --nav-height: 68px;

  /* ─── Transitions ───────────────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   220ms ease;
  --transition-slow:   380ms ease;

  /* ─── Grid Overlay Opacity ──────────────────────────────────────────────── */
  --grid-opacity: 0.028;

  /* ─── Glow Orb Colors (hero) ────────────────────────────────────────────── */
  --glow-left:   rgba(155, 71, 247, 0.55);
  --glow-right:  rgba(197, 108, 255, 0.45);
  --glow-center: rgba(247, 37, 133, 0.25);
}