/* ==========================================================================
   MTC Tennis — Design System Variables
   Phase 1A: Foundation tokens only. No visual changes to the live site.
   ========================================================================== */

:root {
  /* ── Brand Colours ──────────────────────────────────────────────────── */
  --color-primary: #0f3057;
  --color-primary-dark: #0a2240;
  --color-accent: #00a8cc;
  --color-accent-hover: #0095b6;
  --color-accent-light: #e6f7fb;

  /* ── Neutral Colours ────────────────────────────────────────────────── */
  --color-white: #ffffff;
  --color-bg: #ffffff;
  --color-bg-alt: #fafafa;
  --color-bg-muted: #f5f5f5;
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;

  /* ── Text Colours ───────────────────────────────────────────────────── */
  --color-text: #1f2937;
  --color-text-secondary: #6b7280;
  --color-text-disabled: #9ca3af;
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.7);

  /* ── Status Colours ─────────────────────────────────────────────────── */
  --color-success: #059669;
  --color-error: #dc2626;
  --color-warning: #d97706;

  /* ── Schedule / Session Colours ─────────────────────────────────────── */
  --color-session-red: #ef4444;
  --color-session-orange: #f97316;
  --color-session-green: #22c55e;
  --color-session-blue: #3b82f6;
  --color-session-yellow: #eab308;
  --color-session-indigo: #6366f1;
  --color-session-rose: #f43f5e;
  --color-session-emerald: #10b981;

  /* ── Typography ─────────────────────────────────────────────────────── */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-3xl-mobile: 1.5rem;
  --text-4xl-mobile: 1.75rem;

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ── Spacing Scale (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;
  --space-24: 6rem;

  /* ── Section Spacing ────────────────────────────────────────────────── */
  --section-padding-y: var(--space-20);
  --section-padding-y-mobile: var(--space-12);

  /* ── Card Tokens ────────────────────────────────────────────────────── */
  --card-padding: var(--space-6);
  --card-gap: var(--space-6);
  --card-radius: 12px;

  /* ── Form Tokens ────────────────────────────────────────────────────── */
  --form-gap: var(--space-4);
  --input-padding-y: var(--space-3);
  --input-padding-x: var(--space-4);
  --input-height: 48px;
  --input-radius: 8px;

  /* ── Radii ──────────────────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);

  /* ── Z-Index Scale ──────────────────────────────────────────────────── */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-navbar: 1000;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-toast: 1100;
  --z-skip-link: 9999;

  /* ── Transitions ────────────────────────────────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ==========================================================================
     Compatibility Aliases
     These map the current site's variable names to the new design tokens.
     The existing styles.css and inline CSS read these names.
     These aliases ensure nothing breaks while both systems coexist.
     ========================================================================== */

  /* Brand colour aliases (current site names) */
  --primary: var(--color-primary);
  --accent: var(--color-accent);

  /* Neutral aliases */
  --light-gray: var(--color-bg-muted);
  --medium-gray: var(--color-border);
  --dark-gray: #343a40;
  --white: var(--color-white);

  /* Text aliases */
  --text: var(--color-text);
  --text-light: var(--color-text-secondary);

  /* Session colour aliases (current site names) */
  --red-ball: var(--color-session-red);
  --orange-ball: var(--color-session-orange);
  --green-ball: var(--color-session-green);
  --blue-hot-shots: var(--color-session-blue);
  --yellow-junior: var(--color-session-yellow);
  --advanced-junior: var(--color-session-indigo);
  --high-performance: var(--color-session-rose);
  --adult-beginner: var(--color-session-emerald);
}