/* ============================================
   DESIGN TOKENS
   - All design decisions centralized here
   - Supports both light and dark themes
   ============================================ */

:root {
  /* ===== COLORS - LIGHT THEME (default) ===== */
  --color-bg: #f5f7fa;
  --color-surface: #ffffff;
  --color-surface-2: #f8fafc;
  --color-surface-hover: #f1f5f9;

  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-text-subtle: #94a3b8;
  --color-text-on-primary: #ffffff;

  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-border-focus: #3b82f6;

  /* Glassmorphism elements */
  --color-glass-bg: rgba(255, 255, 255, 0.75);
  --color-glass-border: rgba(226, 232, 240, 0.8);
  --color-glass-backdrop: blur(16px);

  /* Brand colors (Vibrant Emerald and High-Energy Sunset Orange) */
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-primary-soft: #eff6ff;
  --color-primary-glow: rgba(59, 130, 246, 0.15);

  --color-accent: #3b82f6;
  --color-accent-hover: #2563eb;
  --color-accent-soft: #eff6ff;
  --color-accent-glow: rgba(59, 130, 246, 0.15);

  /* Semantic */
  --color-success: #10b981;
  --color-success-soft: #d1fae5;
  --color-warning: #f59e0b;
  --color-warning-soft: #fef3c7;
  --color-danger: #ef4444;
  --color-danger-soft: #fee2e2;
  --color-info: #3b82f6;
  --color-info-soft: #dbeafe;

  /* Team Gradients */
  --grad-team-1: linear-gradient(135deg, #818cf8, #c084fc);
  --grad-team-2: linear-gradient(135deg, #f472b6, #fb7185);
  --grad-team-3: linear-gradient(135deg, #fbbf24, #f59e0b);
  --grad-team-4: linear-gradient(135deg, #34d399, #60a5fa);
  --grad-team-5: linear-gradient(135deg, #22d3ee, #2dd4bf);
  --grad-team-6: linear-gradient(135deg, #f87171, #fb923c);

  /* Hero overlay & layout elements */
  --color-hero-overlay: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.08) 0%, rgba(15, 23, 42, 0) 70%),
                        radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.06) 0%, rgba(15, 23, 42, 0) 50%);
  --color-search-bg: rgba(255, 255, 255, 0.6);
  --color-search-border: rgba(226, 232, 240, 0.8);

  /* Shadows & Glows */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 20px 25px -5px rgba(59, 130, 246, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  --shadow-glow-primary: 0 0 20px rgba(59, 130, 246, 0.15);
  --shadow-glow-accent: 0 0 20px rgba(59, 130, 246, 0.2);

  /* ===== TYPOGRAPHY ===== */
  --font-display: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Manrope', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Roboto Mono', monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.5rem;
  --fs-4xl: 3.25rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* ===== SPACING (4px base) ===== */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ===== RADIUS ===== */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 9999px;

  /* ===== TRANSITIONS ===== */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --t-fast: 0.15s;
  --t-normal: 0.25s;
  --t-slow: 0.4s;

  /* ===== LAYOUT - FULL WIDTH, fluid padding ===== */
  --navbar-height: 72px;
  --navbar-h: var(--navbar-height); /* alias */

  /* ===== Dynamic viewport height (mobile URL/nav bar safe) =====
     --app-vh : full visible viewport height
     --app-h  : viewport height minus navbar  */
  --app-vh: 100vh;   /* fallback for old browsers */
  --app-h: calc(var(--app-vh) - var(--navbar-height));
  --container-padding: clamp(1rem, 3vw, 2.5rem);

  /* ===== Z-INDEX ===== */
  --z-base: 1;
  --z-elevated: 10;
  --z-navbar: 100;
  --z-dropdown: 200;
  --z-modal: 500;
  --z-toast: 1000;
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
  --color-bg: #090d16;
  --color-surface: #0f172a;
  --color-surface-2: #1e293b;
  --color-surface-hover: #1e293b77;

  --color-text: #f8fafc;
  --color-text-muted: #94a3b8;
  --color-text-subtle: #64748b;
  --color-text-on-primary: #090d16;

  --color-border: rgba(148, 163, 184, 0.12);
  --color-border-strong: rgba(148, 163, 184, 0.24);
  --color-border-focus: #60a5fa;

  /* Glassmorphism elements */
  --color-glass-bg: rgba(15, 23, 42, 0.6);
  --color-glass-border: rgba(148, 163, 184, 0.08);

  --color-primary: #60a5fa;
  --color-primary-hover: #3b82f6;
  --color-primary-soft: rgba(96, 165, 250, 0.1);
  --color-primary-glow: rgba(96, 165, 250, 0.15);

  --color-accent: #60a5fa;
  --color-accent-hover: #3b82f6;
  --color-accent-soft: rgba(96, 165, 250, 0.1);
  --color-accent-glow: rgba(96, 165, 250, 0.2);

  --color-success-soft: rgba(16, 185, 129, 0.12);
  --color-danger-soft: rgba(239, 68, 68, 0.12);
  --color-info-soft: rgba(59, 130, 246, 0.12);
  --color-warning-soft: rgba(245, 158, 11, 0.12);

  --color-hero-overlay: radial-gradient(circle at 50% 0%, rgba(96, 165, 250, 0.06) 0%, rgba(9, 13, 22, 0) 80%),
                        radial-gradient(circle at 100% 0%, rgba(96, 165, 250, 0.04) 0%, rgba(9, 13, 22, 0) 60%);
  --color-search-bg: rgba(15, 23, 42, 0.4);
  --color-search-border: rgba(255, 255, 255, 0.06);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.6);
  --shadow-hover: 0 20px 25px -5px rgba(96, 165, 250, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}

/* ===== Dynamic viewport override (modern browsers) =====
   Use var(--app-vh) / var(--app-h) instead of 100vh everywhere. */
@supports (height: 100dvh) {
  :root { --app-vh: 100dvh; }
}