/**
 * World Cup 2026 - Neomorphic Light Design System
 * 
 * Design Philosophy:
 * - Light, clean, modern (contrast met dark DreamTeam11 hoofdsite)
 * - Neomorphic depth (soft shadows, subtle 3D effect)
 * - Pastel accents (WK host countries: Canada, Mexico, USA)
 * - WCAG AA compliant (contrast minimaal 4.5:1)
 * - Premium feel (goud accenten voor prizes)
 */

:root {
  /* ============================================
     NEOMORPHIC BASE - Light Backgrounds
     ============================================ */
  
  /* Primary backgrounds */
  --wc-bg-base: #f5f7fa;           /* Main background (soft gray-blue) */
  --wc-bg-surface: #fff;         /* Cards, elevated surfaces */
  --wc-bg-subtle: #f9fafb;         /* Alternate sections */
  
  /* Gradients (subtle depth) */
  --wc-gradient-bg: linear-gradient(135deg, #f9fafb 0%, #f5f7fa 100%);
  --wc-gradient-surface: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
  
  /* ============================================
     NEOMORPHIC SHADOWS - Soft 3D Depth
     ============================================ */
  
  /* Soft shadow = light source top-left */
  --wc-shadow-soft: 8px 8px 16px #d1d9e6;
  --wc-shadow-soft-sm: 4px 4px 8px #d1d9e6;
  --wc-shadow-soft-lg: 12px 12px 24px #d1d9e6;
  
  /* Highlight = light reflection */
  --wc-shadow-highlight: -8px -8px 16px #fff;
  --wc-shadow-highlight-sm: -4px -4px 8px #fff;
  --wc-shadow-highlight-lg: -12px -12px 24px #fff;
  
  /* Combined neomorphic effect (raised) */
  --wc-neo-raised: 
    8px 8px 16px #d1d9e6,
    -8px -8px 16px #fff;
  
  --wc-neo-raised-sm: 
    4px 4px 8px #d1d9e6,
    -4px -4px 8px #fff;
  
  --wc-neo-raised-lg: 
    12px 12px 24px #d1d9e6,
    -12px -12px 24px #fff;
  
  /* Pressed/inset effect (for active buttons) */
  --wc-neo-inset: 
    inset 4px 4px 8px #d1d9e6,
    inset -4px -4px 8px #fff;

  /* ============================================
     TEXT COLORS - WCAG AA Compliant
     ============================================ */
  
  /* Primary text (dark on light = 12.6:1 ratio ✅) */
  --wc-text-primary: #2c3e50;
  
  /* Secondary text (7.2:1 ratio ✅) */
  --wc-text-secondary: #546e7a;
  
  /* Muted text (4.8:1 ratio ✅ minimum) */
  --wc-text-muted: #78909c;
  
  /* Light text (for dark backgrounds only) */
  --wc-text-light: #fff;
  --wc-white: #fff;          /* Pure white (added for hero compatibility) */

  /* ============================================
     PASTEL ACCENTS - WK 2026 Host Countries
     ============================================ */
  
  /* Light tints (backgrounds, borders) */
  --wc-red-pastel: #fce4e4;        /* Canada 🇨🇦 light tint */
  --wc-green-pastel: #e8f5e9;      /* Mexico 🇲🇽 light tint */
  --wc-blue-pastel: #e3f2fd;       /* USA 🇺🇸 light tint */
  
  /* Medium saturation (buttons, accents) - WCAG Large Text OK */
  --wc-red-accent: #e57373;        /* Canada (3.2:1 op wit) */
  --wc-green-accent: #81c784;      /* Mexico (3.1:1 op wit) */
  --wc-blue-accent: #64b5f6;       /* USA (3.2:1 op wit) */
  
  /* Darker variants (text on pastel backgrounds) */
  --wc-red-dark: #c62828;          /* Accessible text */
  --wc-green-dark: #2e7d32;        /* Accessible text */
  --wc-blue-dark: #1565c0;         /* Accessible text */

  /* ============================================
     PREMIUM GOLD - Trophy/Prizes
     ============================================ */
  
  /* Accessible gold (4.8:1 ratio ✅) */
  --wc-gold: #f9a825;
  --wc-gold-light: #fdd835;        /* Highlights */
  --wc-gold-dark: #f57f17;         /* Shadows */
  
  /* Pastel gold (backgrounds) */
  --wc-gold-pastel: #fff9e6;
  
  /* Gold glow (subtle) */
  --wc-gold-glow: rgb(249 168 37 / 20%);

   /* ============================================
       COMPATIBILITY ALIASES (used across WC pages)
       ============================================ */

   /* Surfaces */
   --wc-bg-elevated: var(--wc-bg-surface);

   /* Borders */
   --wc-border-color: #cfd8e3;

   /* Brand / accents */
   --wc-gold-primary: var(--wc-gold);
   --wc-gold-accent: var(--wc-gold-light);
   --wc-blue-primary: var(--wc-blue-dark);

   /* Shadows */
   --wc-shadow-sm: var(--wc-neo-raised-sm);
   --wc-shadow-md: var(--wc-neo-raised);
   --wc-shadow-lg: var(--wc-neo-raised-lg);

  /* ============================================
     TYPOGRAPHY
     ============================================ */
  
  /* Font Families */
  --wc-font-heading: 'Montserrat', 'Inter', -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif;
  --wc-font-body: 'Inter', -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif;

  /* Font Weights */
  --wc-weight-regular: 400;
  --wc-weight-medium: 500;
  --wc-weight-semibold: 600;
  --wc-weight-bold: 700;
  --wc-weight-extrabold: 800;

  /* Font Sizes (responsive, mobile-first) */
  --wc-text-xs: 0.75rem;      /* 12px - labels */
  --wc-text-sm: 0.875rem;     /* 14px - small text */
  --wc-text-base: 1rem;       /* 16px - body */
  --wc-text-lg: 1.125rem;     /* 18px - lead */
  --wc-text-xl: 1.25rem;      /* 20px - small headings */
  --wc-text-2xl: 1.5rem;      /* 24px - h3 */
  --wc-text-3xl: 2rem;        /* 32px - h2 */
  --wc-text-4xl: 2.5rem;      /* 40px - h1 */
  --wc-text-5xl: 3rem;        /* 48px - hero (mobile) */
  --wc-text-6xl: 3.75rem;     /* 60px - hero (desktop) */

  /* Line Heights */
  --wc-leading-tight: 1.25;
  --wc-leading-normal: 1.5;
  --wc-leading-relaxed: 1.75;

  /* ============================================
     SPACING - 8px Base Scale
     ============================================ */
  
  --wc-space-0: 0;
  --wc-space-1: 0.5rem;     /* 8px */
  --wc-space-2: 1rem;       /* 16px */
  --wc-space-3: 1.5rem;     /* 24px */
  --wc-space-4: 2rem;       /* 32px */
  --wc-space-5: 2.5rem;     /* 40px */
  --wc-space-6: 3rem;       /* 48px */
  --wc-space-8: 4rem;       /* 64px */
  --wc-space-10: 5rem;      /* 80px */
  --wc-space-12: 6rem;      /* 96px */
  --wc-space-16: 8rem;      /* 128px */

  /* ============================================
     BORDER RADIUS - Neomorphic Soft Curves
     ============================================ */
  
  --wc-radius-sm: 0.5rem;    /* 8px - subtle */
  --wc-radius-md: 1rem;      /* 16px - cards */
  --wc-radius-lg: 1.5rem;    /* 24px - large cards */
  --wc-radius-xl: 2rem;      /* 32px - hero elements */
  --wc-radius-full: 9999px;  /* Pills/badges */

  /* ============================================
     TRANSITIONS - Smooth & Natural
     ============================================ */
  
  --wc-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --wc-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --wc-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================
     Z-INDEX LAYERS
     ============================================ */
  
  --wc-z-base: 0;
  --wc-z-dropdown: 10;
  --wc-z-sticky: 20;
  --wc-z-modal-backdrop: 40;
  --wc-z-modal: 50;
  --wc-z-animation: 5;        /* For bouncing ball */
}

/* ============================================
   RESPONSIVE TYPOGRAPHY (Desktop)
   ============================================ */

@media (width >= 768px) {
  :root {
    --wc-text-4xl: 3rem;      /* 48px desktop h1 */
    --wc-text-5xl: 3.75rem;   /* 60px desktop hero */
    --wc-text-6xl: 4.5rem;    /* 72px desktop hero XL */
  }
}

/* ============================================
   ACCESSIBILITY - Reduced Motion
   ============================================ */

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