/* ==========================================================================
   Design System Variables (Dark Theme Default & Glassmorphism Tokens)
   ========================================================================== */
:root {
  /* Typography */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Curated HSL Dark Theme Palette */
  --bg-primary: hsl(222, 35%, 7%);
  --bg-secondary: hsl(222, 30%, 11%);
  --bg-tertiary: hsl(222, 25%, 15%);
  
  /* Glassmorphism Surface Tokens */
  --glass-bg: hsla(222, 28%, 14%, 0.65);
  --glass-bg-hover: hsla(222, 28%, 18%, 0.75);
  --glass-border: hsla(0, 0%, 100%, 0.08);
  --glass-border-hover: hsla(0, 0%, 100%, 0.18);
  --glass-blur: 16px;
  
  /* Text & Contrast */
  --text-primary: hsl(210, 25%, 98%);
  --text-secondary: hsl(215, 18%, 70%);
  --text-muted: hsl(215, 15%, 50%);
  
  /* Accent Colors (Vibrant & Premium) */
  --accent-primary: hsl(192, 95%, 55%);     /* Electric Cyan */
  --accent-secondary: hsl(255, 85%, 65%);   /* Neon Indigo/Purple */
  --accent-gradient: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  
  /* Account Status Colors */
  --status-ready: hsl(152, 75%, 48%);       /* Emerald Ready */
  --status-ready-bg: hsla(152, 75%, 48%, 0.15);
  --status-active: hsl(200, 90%, 55%);      /* Electric Blue Active */
  --status-active-bg: hsla(200, 90%, 55%, 0.15);
  --status-waiting: hsl(38, 95%, 55%);      /* Amber Waiting */
  --status-waiting-bg: hsla(38, 95%, 55%, 0.15);
  --status-expired: hsl(348, 85%, 60%);     /* Rose Expired */
  --status-expired-bg: hsla(348, 85%, 60%, 0.15);

  /* Spacing Scale */
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-2xl: 3rem;    /* 48px */

  /* Border Radius */
  --radius-sm: 0.375rem; /* 6px */
  --radius-md: 0.75rem;  /* 12px */
  --radius-lg: 1.25rem;  /* 20px */
  --radius-xl: 1.75rem;  /* 28px */
  --radius-full: 9999px;

  /* Shadows & Elevations */
  --shadow-sm: 0 4px 12px hsla(0, 0%, 0%, 0.25);
  --shadow-md: 0 8px 24px hsla(0, 0%, 0%, 0.35);
  --shadow-lg: 0 16px 48px hsla(0, 0%, 0%, 0.5);
  --shadow-glow: 0 0 25px hsla(192, 95%, 55%, 0.25);

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}