:root {
  /* ═══════════════════════════════════════════════════════════════
     ANGEL GROUPS - Premium Corporate Design System
     ═══════════════════════════════════════════════════════════════ */

  /* Primary Brand Colors - Deep Indigo/Navy */
  --color-primary: #0a0f1e;
  --color-primary-light: #141b2d;
  --color-primary-mid: #1a2332;

  /* Accent - Luxury Gold */
  --color-accent: #d4a853;
  --color-accent-hover: #e8be6a;
  --color-accent-glow: rgba(212, 168, 83, 0.4);

  /* Secondary Accent - Electric Blue */
  --color-secondary: #3b82f6;
  --color-secondary-light: #60a5fa;

  /* Success & Status */
  --color-success: #10b981;
  --color-success-light: #34d399;

  /* Text Colors */
  --color-text-main: #1e293b;
  --color-text-light: #64748b;
  --color-text-muted: #94a3b8;
  --color-text-white: #ffffff;
  --color-text-gold: #b8860b;
  /* Darker gold for WCAG AA contrast */

  /* Backgrounds */
  --color-bg-dark: #0a0f1e;
  --color-bg-light: #f8fafc;
  --color-bg-white: #ffffff;
  --color-bg-glass: rgba(255, 255, 255, 0.08);
  --color-bg-glass-light: rgba(255, 255, 255, 0.95);

  /* Borders */
  --color-border: #e2e8f0;
  --color-border-light: rgba(255, 255, 255, 0.1);
  --color-border-gold: rgba(212, 168, 83, 0.3);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #0a0f1e 0%, #1a2332 50%, #0d1424 100%);
  --gradient-gold: linear-gradient(135deg, #d4a853 0%, #e8be6a 50%, #c49a47 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(248, 250, 252, 1) 100%);

  /* Typography */
  --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: 'Outfit', sans-serif;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 6rem;

  /* Premium Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
  --shadow-gold: 0 4px 30px rgba(212, 168, 83, 0.3);
  --shadow-glow: 0 0 40px rgba(212, 168, 83, 0.2);

  /* Border Radius */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}