@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Color Palette - Core Tokens */
  --bg-primary: #F8FAFC;
  --color-primary: #6C4AB6;
  --color-primary-rgb: 108, 74, 182;
  --color-accent: #C9A227;
  --color-accent-rgb: 201, 162, 39;
  --color-card: #FFFFFF;
  --color-text: #222222;
  --color-text-muted: #6B7280;
  
  /* Brand-specific Tints and Shades */
  --color-primary-light: rgba(108, 74, 182, 0.08);
  --color-primary-hover: #56339c;
  --color-accent-light: rgba(201, 162, 39, 0.1);
  --color-accent-hover: #b08d1e;
  
  /* Background Gradients (Subtle & Premium) */
  --gradient-bg: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
  --gradient-primary: linear-gradient(135deg, #6C4AB6 0%, #8561db 100%);
  --gradient-accent: linear-gradient(135deg, #C9A227 0%, #e2b93c 100%);
  --gradient-gold-text: linear-gradient(135deg, #A8810F 0%, #C9A227 50%, #E6C865 100%);
  --gradient-purple-text: linear-gradient(135deg, #4A2E80 0%, #6C4AB6 100%);
  
  /* Typography */
  --font-family: 'Poppins', sans-serif;
  --fs-body: 16px;
  
  /* Spacing & Borders */
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 24px;
  --border-radius-xl: 32px;
  --border-radius-full: 9999px;
  
  /* Shadows (Multi-layered, realistic depth) */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 10px 20px -5px rgba(108, 74, 182, 0.03), 0 8px 16px -6px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 20px 25px -5px rgba(108, 74, 182, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-premium: 0 25px 50px -12px rgba(108, 74, 182, 0.08);
  --shadow-button: 0 4px 14px rgba(108, 74, 182, 0.25);
  --shadow-button-accent: 0 4px 14px rgba(201, 162, 39, 0.2);
  
  /* Transitions */
  --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  
  /* Glassmorphism Defaults */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-backdrop-filter: blur(20px) saturate(180%);
}