/* CSM Website Design System Tokens
 * Modern Web3-inspired design with brand colors
 */

:root {
  /* Colors */
  --bg: #ffffff;
  --text: #0b1220;
  --muted: #485568;
  --border: #e7ebf0;
  
  /* Brand Colors */
  --yellow: #ffcd00;
  --green: #00843d;
  --purple: #61286d;
  --ink: #0b1220;
  
  /* UI Colors */
  --card: rgba(255, 255, 255, .95);
  --glass-border: rgba(255, 255, 255, .60);
  --card-bg: #ffffff;
  --section-bg: #f8f9fa;
  
  /* Shadows */
  --shadow-sm: 0 6px 16px rgba(13, 35, 28, .08);
  --shadow-md: 0 14px 28px rgba(13, 35, 28, .12);
  --shadow-lg: 0 28px 60px rgba(13, 35, 28, .16);
  
  /* Radii */
  --radius: 6px;
  --radius-lg: 18px;
  
  /* Type Scale (based on 1.25 ratio) */
  --fs-2: 12px;
  --fs-1: 14px;
  --fs0: 16px;
  --fs1: 18px;
  --fs2: 20px;
  --fs3: 24px;
  --fs4: 30px;
  --fs5: 38px;
  --fs6: 48px;
  
  /* Spacing Scale (8px rhythm) */
  --sp-0: 4px;
  --sp-1: 8px;
  --sp-2: 12px;
  --sp-3: 16px;
  --sp-4: 20px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;
  --sp-9: 64px;
  --sp-10: 80px;
  
  /* Gradients */
  --bg-grad: 
    radial-gradient(1200px 600px at 10% -10%, rgba(255, 205, 0, .30), transparent 60%),
    radial-gradient(900px 520px at 100% 10%, rgba(0, 132, 61, .25), transparent 55%),
    radial-gradient(800px 480px at 50% 120%, rgba(97, 40, 109, .15), transparent 60%);
  --cta-grad: linear-gradient(135deg, #ffcd00, #00843d);
  --green-grad: linear-gradient(135deg, #00843d, #006b32);
  --yellow-grad: linear-gradient(135deg, #ffcd00, #e6b800);
  
  /* Animation Timings */
  --transition-fast: 0.18s ease;
  --transition-base: 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-smooth: 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Dark mode overrides - to be implemented later
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220;
    --text: #ffffff;
    --muted: #9ba5b5;
    --border: #1f2937;
    --card: rgba(31, 41, 55, .70);
    --glass-border: rgba(255, 255, 255, .12);
  }
} */