@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

:root {
  /* ================================
     Primary: 테니스 코트 그린 (잔디 코트 연상)
     ================================ */
  --color-primary-50: #ecfdf5;
  --color-primary-100: #d1fae5;
  --color-primary-200: #a7f3d0;
  --color-primary-300: #6ee7b7;
  --color-primary-400: #34d399;
  --color-primary-500: #10b981;
  --color-primary-600: #059669;
  --color-primary-700: #047857;
  --color-primary-800: #065f46;
  --color-primary-900: #064e3b;

  /* ================================
     Secondary: 슬레이트 (심판석/관리자 톤)
     ================================ */
  --color-secondary-50: #f8fafc;
  --color-secondary-100: #f1f5f9;
  --color-secondary-200: #e2e8f0;
  --color-secondary-300: #cbd5e1;
  --color-secondary-500: #64748b;
  --color-secondary-700: #334155;
  --color-secondary-800: #1e293b;
  --color-secondary-900: #0f172a;

  /* ================================
     Accent: 테니스볼 옐로우
     ================================ */
  --color-accent-50: #fefce8;
  --color-accent-100: #fef9c3;
  --color-accent-300: #fde047;
  --color-accent-500: #eab308;
  --color-accent-600: #ca8a04;
  --color-accent-700: #a16207;

  /* ================================
     Team Side Colors (복식 팀 A/B 구분)
     ================================ */
  --color-team-a: #3b82f6;
  --color-team-b: #ef4444;
  --color-team-amber: #f59e0b;
  --color-team-blue: #3b82f6;
  --color-team-emerald: #10b981;
  --color-team-violet: #8b5cf6;

  /* ================================
     Match Status Colors (경기 상태)
     ================================ */
  --color-status-scheduled: #64748b;
  --color-status-scheduled-bg: #f1f5f9;
  --color-status-in-progress: #3b82f6;
  --color-status-in-progress-bg: #eff6ff;
  --color-status-completed: #10b981;
  --color-status-completed-bg: #ecfdf5;
  --color-status-cancelled: #ef4444;
  --color-status-cancelled-bg: #fef2f2;
  --color-status-walkover: #f59e0b;
  --color-status-walkover-bg: #fffbeb;
  --color-status-bye: #8b5cf6;
  --color-status-bye-bg: #f5f3ff;

  /* Court Status Colors (코트 상태) */
  --color-court-available: #10b981;
  --color-court-available-bg: #ecfdf5;
  --color-court-in-use: #3b82f6;
  --color-court-in-use-bg: #eff6ff;
  --color-court-maintenance: #f59e0b;
  --color-court-maintenance-bg: #fffbeb;

  /* ================================
     Semantic Colors
     ================================ */
  --color-error: #ef4444;
  --color-error-bg: #fef2f2;
  --color-warning: #f59e0b;
  --color-warning-bg: #fffbeb;
  --color-warning-50: #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-300: #fcd34d;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;
  --color-success: #10b981;
  --color-success-bg: #ecfdf5;
  --color-success-50: #ecfdf5;
  --color-success-500: #10b981;
  --color-success-600: #059669;
  --color-success-700: #047857;
  --color-success-800: #065f46;
  --color-info: #3b82f6;
  --color-info-bg: #eff6ff;
  --color-info-200: #bfdbfe;
  --color-info-300: #93c5fd;

  /* ================================
     Overlay Utilities
     ================================ */
  --color-overlay-light: rgba(255, 255, 255, 0.8);
  --color-overlay-medium: rgba(255, 255, 255, 0.85);
  --color-overlay-subtle: rgba(255, 255, 255, 0.2);

  /* ================================
     Surface Levels
     ================================ */
  --surface-primary: #ffffff;
  --surface-secondary: #fafaf9;
  --surface-tertiary: #f5f5f4;
  --surface-elevated: #ffffff;
  --surface-sidebar: #1e293b;
  --surface-scoreboard: #0f172a;

  /* ================================
     Border Scales
     ================================ */
  --border-default: #e7e5e4;
  --border-subtle: #f5f5f4;
  --border-strong: #d6d3d1;

  /* ================================
     Text Hierarchy
     ================================ */
  --text-primary: #1c1917;
  --text-secondary: #78716c;
  --text-tertiary: #8a8580;
  --text-inverse: #ffffff;

  /* ================================
     Typography
     ================================ */
  --font-headline-en: "Outfit", sans-serif;
  --font-body: "Pretendard Variable", "Pretendard", sans-serif;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-score: 48px;

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

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

  /* ================================
     Spacing (4px base unit)
     ================================ */
  --spacing-05: 4px;
  --spacing-1: 8px;
  --spacing-15: 12px;
  --spacing-2: 16px;
  --spacing-3: 24px;
  --spacing-4: 32px;
  --spacing-5: 40px;
  --spacing-6: 48px;
  --spacing-8: 64px;

  /* ================================
     Border Radius
     ================================ */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --radius: var(--radius-md);

  /* ================================
     Shadows
     ================================ */
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-1: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 8px 40px rgba(0, 0, 0, 0.12);
  --shadow-3: 0 16px 60px rgba(0, 0, 0, 0.16);
  --shadow-focus: 0 0 0 3px rgba(16, 185, 129, 0.2);

  /* ================================
     Layout
     ================================ */
  --sidebar-width: 260px;
  --sidebar-width-collapsed: 64px;
  --content-max-width: 1200px;
  --content-narrow: 640px;
  --content-medium: 800px;
  --header-height: 64px;
  --score-input-height: 56px;

  /* ================================
     Transitions
     ================================ */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;

  /* ================================
     Win/Loss Result Colors
     ================================ */

  /* Theme A: Blue Victory / Coral Loss (색약 친화적, 가장 안전) */
  --result-win-text-a: #0066CC;
  --result-win-bg-a: #E8F0FF;
  --result-win-border-a: #B3D4FF;
  --result-loss-text-a: #D84433;
  --result-loss-bg-a: #FFEBE7;
  --result-loss-border-a: #FFCFC9;
  --result-draw-text-a: #7C5A8F;
  --result-draw-bg-a: #F3E8F8;

  /* Theme B: Gold Victory / Teal Loss (따뜻한 승리, 차가운 패배) */
  --result-win-text-b: #B8860B;
  --result-win-bg-b: #FFFACD;
  --result-win-border-b: #F5E6A3;
  --result-loss-text-b: #0E7A7A;
  --result-loss-bg-b: #E0F7F6;
  --result-loss-border-b: #B2E4E2;
  --result-draw-text-b: #8B8680;
  --result-draw-bg-b: #F5F3F1;

  /* Theme C: Orange Momentum / Navy Determination (스포츠 컨벤션) */
  --result-win-text-c: #E06C00;
  --result-win-bg-c: #FFF4E6;
  --result-win-border-c: #FFD9B3;
  --result-loss-text-c: #003366;
  --result-loss-bg-c: #E8EEF5;
  --result-loss-border-c: #C5D5E8;
  --result-draw-text-c: #6B7280;
  --result-draw-bg-c: #F3F4F6;

  /* Active theme (default: A) — override via [data-result-theme="b"] or "c" */
  --result-win-text: var(--result-win-text-a);
  --result-win-bg: var(--result-win-bg-a);
  --result-win-border: var(--result-win-border-a);
  --result-loss-text: var(--result-loss-text-a);
  --result-loss-bg: var(--result-loss-bg-a);
  --result-loss-border: var(--result-loss-border-a);
  --result-draw-text: var(--result-draw-text-a);
  --result-draw-bg: var(--result-draw-bg-a);

  /* ================================
     Aliases (shorthand)
     ================================ */
  --color-primary: var(--color-primary-500);
  --color-secondary: var(--color-secondary-800);
  --color-grey-50: var(--surface-secondary);
  --color-grey-100: var(--surface-tertiary);
  --color-grey-200: var(--border-default);
  --color-grey-900: var(--text-primary);

  /* ================================
     B-Style Surface Tokens (Light Default)
     ================================ */
  --surface-body: #F4F2F7;
  --surface-card: #FFFFFF;
  --surface-muted: #EDEAF2;
  --surface-sidebar: #FFFFFF;
  --border-card: #E8E5ED;
  --border-card-light: #F0EDF5;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
  --shadow-card-lg: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-slot: 0 2px 8px rgba(0,0,0,0.06);
  --text-heading: #1A1523;
  --text-body: #6B6280;
  --text-muted: #9B93AD;
}

/* Theme B override */
[data-result-theme="b"] {
  --result-win-text: var(--result-win-text-b);
  --result-win-bg: var(--result-win-bg-b);
  --result-win-border: var(--result-win-border-b);
  --result-loss-text: var(--result-loss-text-b);
  --result-loss-bg: var(--result-loss-bg-b);
  --result-loss-border: var(--result-loss-border-b);
  --result-draw-text: var(--result-draw-text-b);
  --result-draw-bg: var(--result-draw-bg-b);
}

/* Theme C override */
[data-result-theme="c"] {
  --result-win-text: var(--result-win-text-c);
  --result-win-bg: var(--result-win-bg-c);
  --result-win-border: var(--result-win-border-c);
  --result-loss-text: var(--result-loss-text-c);
  --result-loss-bg: var(--result-loss-bg-c);
  --result-loss-border: var(--result-loss-border-c);
  --result-draw-text: var(--result-draw-text-c);
  --result-draw-bg: var(--result-draw-bg-c);
}

/* ── Dark mode & Grand Slam themes moved to application.css (must load after tailwind.css) ── */