:root {
  /* === COLORS === */
  --color-bg: #F0F4F8;         /* Very light cool gray/blue to let aurora shine */
  --color-surface: rgba(255, 255, 255, 0.7);    /* Glass Surface */
  --color-surface-2: rgba(255, 255, 255, 0.9);  /* More opaque for inputs */
  --color-border: rgba(255, 255, 255, 0.5);     /* Frost border */

  /* Glassmorphism settings */
  --glass-blur: blur(24px);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);

  /* Cheerful Accent Palette (No Purple) */
  --color-accent: #00D2FF;     /* Cyber Cyan/Sky Blue */
  --color-accent-hover: #00B8E6;
  --color-accent-glow: rgba(0, 210, 255, 0.4);
  
  --color-success: #38E54D;    /* Vibrant Mint */
  --color-warning: #FFC300;    /* Sunset Yellow */
  --color-danger: #FF4B4B;     /* Punchy Red */

  /* Aurora Blob Colors */
  --aurora-1: #00D2FF;
  --aurora-2: #38E54D;
  --aurora-3: #FFC300;

  /* Text Colors */
  --color-text-primary: #1A202C; /* Very dark slate, almost black for high contrast */
  --color-text-secondary: #4A5568; 
  --color-text-muted: #A0AEC0;

  /* === PERSON COLORS (Vibrant & Playful) === */
  --person-1: #FF6B6B; /* Coral */
  --person-2: #4ECDC4; /* Teal/Mint */
  --person-3: #FFD166; /* Yellow */
  --person-4: #A06CD5; /* Soft Purple */
  --person-5: #118AB2; /* Ocean Blue */
  --person-6: #EF476F; /* Pink */
  --person-7: #06D6A0; /* Bright Green */
  --person-8: #FF9F1C; /* Orange */

  /* === TYPOGRAPHY === */
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Nunito', sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* === SPACING (8px base grid) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* === SHADOWS (Soft & Modern) === */
  --shadow-sm: 0 2px 8px rgba(30, 41, 59, 0.04);
  --shadow-md: 0 8px 24px rgba(30, 41, 59, 0.08);
  --shadow-lg: 0 16px 32px rgba(30, 41, 59, 0.12);

  /* === LAYOUT === */
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  --max-width: 430px;
  
  /* Very rounded, friendly shapes */
  --border-radius-sm: 12px;
  --border-radius-md: 20px;
  --border-radius-lg: 32px;
  --border-radius-full: 999px;

  /* === MOTION === */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.dark-mode {
  --color-bg: #0A0F1A;
  --color-surface: rgba(15, 23, 42, 0.7);
  --color-surface-2: rgba(15, 23, 42, 0.9);
  --color-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
  --color-text-primary: #F8FAFC;
  --color-text-secondary: #94A3B8;
  --color-text-muted: #64748B;
}