/* === Font imports === */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Sans+3:wght@300;400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');

/* === Design Tokens === */
/* Blend: Stripe (shadows, colors) + Linear (typography) + Supabase (radii, accents) */
:root {
  /* --- Background palette (Warm sports-inspired) --- */
  --bg-deep: #faf7f5;
  --bg-deep-blue: #faf7f5;
  --bg-card: #ffffff;
  --bg-elevated: #ffffff;
  --bg-cyan-grey: #f5f0ec;
  --bg-muted-teal: #ebe5e0;
  --bg-purple-blue: #fef2f2;

  /* --- Glass tokens (mapped to solid/subtle for Stripe aesthetic) --- */
  --glass-bg: rgba(255, 255, 255, 0.92);
  --glass-bg-hover: rgba(255, 255, 255, 0.97);
  --glass-bg-active: #ffffff;
  --glass-border: #e3e8ee;
  --glass-border-strong: #d0d5dd;
  --glass-border-dark: rgba(0, 0, 0, 0.08);

  /* --- Text (Deep warm) --- */
  --text-primary: #1a1a1a;
  --text-secondary: #4a4a4a;
  --text-tertiary: #8a8a8a;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: rgba(255, 255, 255, 0.72);

  /* --- Interactive (Sports: Red primary + Championship Gold CTA) --- */
  --interactive-primary: #DC2626;
  --interactive-hover: #B91C1C;
  --interactive-accent: #DC2626;
  --interactive-accent-hover: #B91C1C;
  --interactive-accent-bg: rgba(220, 38, 38, 0.08);
  --interactive-secondary: #D97706;
  --interactive-secondary-bg: rgba(217, 119, 6, 0.08);
  --interactive-cta: #FBBF24;
  --interactive-cta-hover: #F59E0B;
  --interactive-cta-text: #7F1D1D;
  --interactive-danger: #ef4444;
  --interactive-danger-bg: rgba(239, 68, 68, 0.06);
  --interactive-success: #16a34a;
  --interactive-success-bg: rgba(22, 163, 74, 0.08);
  --interactive-warning: #f59e0b;
  --interactive-warning-bg: rgba(245, 158, 11, 0.06);

  /* --- Z-index layers --- */
  --z-base: 0;
  --z-elevated: 10;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-toast: 50;

  /* --- Blur (kept but reduced usage — Stripe prefers clean) --- */
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 20px;
  --blur-xl: 32px;

  /* --- Shadows (warm-tinted multi-layer) --- */
  --shadow-sm: 0 1px 3px rgba(220, 38, 38, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px rgba(220, 38, 38, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 7px 14px rgba(220, 38, 38, 0.08), 0 3px 6px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 15px 35px rgba(220, 38, 38, 0.08), 0 5px 15px rgba(0, 0, 0, 0.05);

  /* Aliases for backward compat */
  --shadow-glass-sm: var(--shadow-sm);
  --shadow-glass: var(--shadow-md);
  --shadow-glass-hover: var(--shadow-lg);
  --shadow-glass-lg: var(--shadow-xl);
  --shadow-elevated: 0 13px 27px rgba(50, 50, 93, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08);
  --shadow-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-button: 0 1px 3px rgba(50, 50, 93, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-button-hover: 0 4px 6px rgba(50, 50, 93, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);

  /* --- Spacing (unchanged) --- */
  --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;

  /* --- Border radius (Supabase-inspired pill for buttons) --- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* --- Typography (Sports: Bebas Neue headings + Source Sans 3 body) --- */
  --font-heading: 'Bebas Neue', 'Noto Sans Thai', system-ui, sans-serif;
  --font-sans: 'Source Sans 3', 'Noto Sans Thai', system-ui, -apple-system, sans-serif;
  --text-display: 400 3.5rem/1.0 var(--font-heading);
  --text-h1: 400 2.5rem/1.1 var(--font-heading);
  --text-h2: 400 1.75rem/1.15 var(--font-heading);
  --text-h3: 400 1.375rem/1.2 var(--font-heading);
  --text-body: 400 0.9375rem/1.6 var(--font-sans);
  --text-body-sm: 400 0.8125rem/1.5 var(--font-sans);
  --text-caption: 500 0.6875rem/1.4 var(--font-sans);
  --text-button: 600 0.875rem/1 var(--font-sans);

  /* Letter-spacing tokens (wide for Bebas Neue impact) */
  --tracking-display: 0.04em;
  --tracking-heading: 0.03em;
  --tracking-body: 0em;
  --tracking-tight: 0.02em;

  /* --- Transitions --- */
  --transition-fast: 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-normal: 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-slow: 350ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-enter: 500ms cubic-bezier(0.16, 1, 0.3, 1);
}