/**
 * Design Tokens — MyNamCycling Landing Page
 * Variables for consistent design across the platform
 */

:root {
  /* === Brand Palette === */
  --brand-600: #007A5E; /* Primary emerald - modern African sport identity */
  --brand-500: #00A884;
  --brand-400: #33BE9F;
  --brand-300: #66D1B8;
  --brand-200: #B6E8DB;
  --brand-100: #D4F1E8;
  --brand-50: #F2FBF8;

  /* Accent */
  --accent-500: #FFBE30; /* Gold - energy and achievement */
  --accent-400: #E6A800; /* Darker gold for hover states */

  /* Neutral Ink */
  --ink-900: #0F172A; /* Deep text */
  --ink-700: #334155; /* Medium text */
  --ink-500: #64748B; /* Light text */

  /* Surfaces */
  --surface-0: #FFFFFF; /* Pure white */
  --surface-50: #F8FAFB; /* Light background */
  --surface-100: #F1F5F9; /* Subtle background */
  --surface-200: #E2E8F0; /* Borders & dividers */
  --surface-300: #CBD5E1; /* Strong borders */

  /* Semantic Colors */
  --color-error: #EF4444;
  --color-error-light: #FEF2F2;
  --color-success: #10B981;
  --color-success-light: #F0FDF4;
  --color-warning: #F59E0B;
  --color-warning-light: #FFFBEB;
  --color-info: #3B82F6;
  --color-info-light: #EFF6FF;

  /* === Typography === */
  --font-family: Inter, Manrope, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
  
  /* Type Scale */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 40px;
  --text-5xl: 56px;

  /* === Border Radius === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* === Shadows === */
  --shadow-soft: 0 2px 12px rgba(0,0,0,.08);
  --shadow-hover: 0 4px 20px rgba(0,0,0,.12);
  --shadow-pop: 0 10px 30px rgba(0,0,0,.18);

  /* === Spacing === */
  --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;

  /* === Z-index === */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;

  /* === Motion === */
  --transition-fast: 160ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 240ms ease;
  --easing-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --easing-ease-in: cubic-bezier(0.4, 0.0, 1, 1);
  --easing-ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Dark mode support (future-ready) */
@media (prefers-color-scheme: dark) {
  :root {
    --surface-0: #1a1a1a;
    --surface-50: #2a2a2a;
    --surface-100: #3a3a3a;
    --ink-900: #f8fafc;
    --ink-700: #e2e8f0;
    --ink-500: #94a3b8;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}