/* ============================================================================
   tokens.css — SAGE design system. Palette A "Spectral dusk"
   (indigo/violet/magenta) + sparing orange accent. Type scale, radii, motion.
   ============================================================================ */

:root {
  /* Backgrounds — cyberpunk deep navy base (#0c0d27) bleeding toward purple */
  --bg:          #0c0d27;   /* deep navy page base */
  --bg-2:        #141031;   /* alt sections — a touch toward purple */
  --bg-deep:     #07081a;   /* darkest tone for vignette edges (never #000) */
  --bg-card:     rgba(28, 22, 58, 0.50);
  --bg-elevated: rgba(255, 255, 255, 0.035);

  /* Text — warm cream on dark */
  --text:        #ece6da;
  --text-muted:  rgba(236, 230, 218, 0.62);
  --text-faint:  rgba(236, 230, 218, 0.40);

  /* Accents — violet→magenta primary; ORANGE used sparingly */
  --violet:  #6d4aff;
  --magenta: #ff3d81;
  --orange:  #ff7a1a;
  --accent:  var(--violet);

  /* Aurora lava-lamp colours — cyberpunk: purple → magenta-wine */
  --aur-1: #4b37b1;   /* purple */
  --aur-2: #9d3063;   /* magenta-wine */
  --aur-3: #6e3a8f;   /* bridge purple-magenta */

  /* Borders */
  --border:        rgba(255, 255, 255, 0.05);
  --border-hover:  rgba(255, 255, 255, 0.10);
  --border-accent: rgba(109, 74, 255, 0.35);

  /* Shadows / glow */
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.55);
  --glow-violet: 0 0 60px rgba(109, 74, 255, 0.18);
  --glow-orange: 0 0 40px rgba(255, 122, 26, 0.16);

  /* Typography */
  --font-display: 'Geist', system-ui, sans-serif;
  --font-body:    'Geist', 'Inter', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, monospace;

  /* Type scale */
  --fs-xs: 0.8125rem;  /* 13 */
  --fs-sm: 0.9375rem;  /* 15 */
  --fs-md: 1.0625rem;  /* 17 */
  --fs-lg: 1.375rem;   /* 22 */
  --fs-xl: 2rem;       /* 32 */
  --fs-2xl: 3rem;      /* 48 */
  --fs-3xl: 4.5rem;    /* 72 */

  /* Radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px;

  /* Spacing rhythm */
  --space-section: clamp(4rem, 10vw, 9rem);
  --maxw: 1180px;

  /* Motion — ratel "house" curve */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.55s;
  --dur-fast: 0.18s;
}