/* ============================================
   THE VIOLET TERMINAL — Design Tokens
   ramieid.com Design System
   Primary: Neon Purple (#cc97ff)
   Secondary: Data Cyan (#00eefc)
   Tertiary: Alert Magenta (#ff6b98)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Righteous&family=Quicksand:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap');
@import url('https://fonts.cdnfonts.com/css/manuscribe-free');
@import url('https://fonts.cdnfonts.com/css/offbit');

:root {
  /* ── Primary (Neon Purple) ── */
  --primary: #cc97ff;
  --primary-dim: #b87aef;
  --primary-container: #c285ff;
  --primary-fixed: #d8b4fe;
  --primary-fixed-dim: #cc97ff;
  --on-primary: #1a0533;
  --on-primary-container: #2e1065;
  --on-primary-fixed: #0f0320;

  /* ── Secondary (Data Cyan) ── */
  --secondary: #00eefc;
  --secondary-dim: #00c4d4;
  --secondary-container: #004d54;
  --on-secondary: #001f23;
  --on-secondary-container: #a8f0f7;

  /* ── Tertiary (Alert Magenta) ── */
  --tertiary: #ff6b98;
  --tertiary-dim: #e5406e;
  --tertiary-container: #c2204e;
  --on-tertiary: #3a0016;
  --on-tertiary-container: #ffd0dc;

  /* ── Error ── */
  --error: #ff6e84;
  --error-dim: #d73357;
  --error-container: #a70138;
  --on-error: #490013;
  --on-error-container: #ffb2b9;

  /* ── Surfaces ── */
  --surface: #0d0d1a;
  --surface-dim: #0d0d1a;
  --surface-bright: #2a2a3f;
  --surface-tint: #cc97ff;
  --surface-variant: #242437;
  --surface-container-lowest: #000000;
  --surface-container-low: #121220;
  --surface-container: #181828;
  --surface-container-high: #1e1e2f;
  --surface-container-highest: #242437;

  /* ── On Surface / Outline ── */
  --on-surface: #e9e6f9;
  --on-surface-variant: #aba9bb;
  --on-background: #e9e6f9;
  --background: #0d0d1a;
  --outline: #757485;
  --outline-variant: #474656;

  /* ── Inverse ── */
  --inverse-primary: #6d28d9;
  --inverse-surface: #fcf8ff;
  --inverse-on-surface: #545363;

  /* ── Semantic Aliases ── */
  --success: #28c840;
  --warning: #febc2e;
  --info: #00eefc;
  --accent-green: #8eff71;

  /* ── Typography ── */
  --font-headline: 'Space Grotesk', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

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

  /* ── Border Radius (0px — sharp corners only) ── */
  --radius-none: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-full: 0px;

  /* ── Elevation (Photonic Layering — no drop shadows) ── */
  --glow-sm: 0 0 10px rgba(204, 151, 255, 0.08);
  --glow-md: 0 0 20px rgba(204, 151, 255, 0.12);
  --glow-lg: 0 0 40px rgba(204, 151, 255, 0.15);
  --glow-primary: 0 0 20px rgba(204, 151, 255, 0.3);
  --glow-focus: 0 0 10px #cc97ff;
  --glow-tertiary: 0 0 20px rgba(255, 107, 152, 0.3);

  /* ── Ghost Borders ── */
  --ghost-border: 1px solid rgba(71, 70, 86, 0.15);
  --ghost-border-hover: 1px solid rgba(71, 70, 86, 0.6);
  --ghost-border-active: 1px solid rgba(204, 151, 255, 0.3);

  /* ── Backdrop ── */
  --blur-sm: blur(8px);
  --blur-md: blur(12px);
  --blur-lg: blur(20px);

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 600ms ease;
}