@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
@font-face {
  font-family: 'SUIT Variable';
  font-weight: 100 900;
  font-style: normal;
  /* SUIT 가 배포하는 CSS 에는 font-display 가 없어 기본값 auto 로 동작한다.
     auto 는 폰트를 받을 때까지 텍스트를 최대 3초 숨겨 LCP 를 그만큼 늦춘다. */
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/variable/woff2/SUIT-Variable.woff2') format('woff2-variations');
}

: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;
  --color-primary-950: #022c22;

  /* ================================
     Brand Clay: 클레이 코트 (브랜드 마케팅 표면 전용)
     아이콘 정본 public/icon.svg fill #b34a1e / stroke #f5e6d3 에서 도출.
     원시 스케일 = 모드 무관 재료(다크 재정의 금지).
     시맨틱 소비는 landing.css 의 #landing-root --brand-* 쌍이 담당한다.
     제품 UI(--theme-accent-*, 에메랄드)는 변경 없음 — brand-renewal 2026-08-23.
     ================================ */
  --color-clay-50: #fbf3ee;
  --color-clay-100: #f5e6d3; /* = 크림(아이콘 스트로크) */
  --color-clay-200: #ecd0b8;
  --color-clay-300: #dfae8a;
  --color-clay-400: #cf7f50;
  --color-clay-500: #b34a1e; /* 브랜드 채움(아이콘 바탕) */
  --color-clay-600: #9a3e17;
  --color-clay-700: #7f3312;
  --color-clay-800: #642810;
  --color-clay-900: #4a1d0b;

  /* ================================
     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;
  /* 다크 표면 위 error 전경용. --color-error(#ef4444)는 다크 카드(#262231)에서
     4.12:1 로 AA 미달이라 작은 글자에 쓸 수 없다. red-300 은 7.3:1 로 통과하면서
     빨강 정체성을 유지한다. warning-300 / info-300 과 같은 단계 관례. */
  --color-error-300: #fca5a5;
  --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-warning-900: #78350f;
  --color-warning-950: #451a03;
  --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: 'SUIT Variable', 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);

  /* ================================
     iOS 26 Radius / Glass (P0 — 시안 web-ios26-renewal.html 미러,
     iOS SOT: DesignSystem/Radius.swift · Shadow.swift · Material+Glass.swift)
     ================================ */
  --radius-la: 22px;          /* iOS Radius.la */
  --radius-3xl: 28px;         /* 대형 패널 — 주의: tailwind.css 가 뒤에 로드되며 자체 --radius-3xl(1.5rem) 로 덮음.
                                 Tailwind 밖 CSS 에서만 쓰거나 28px(1.75rem) 리터럴 사용 (modal_component 참조) */
  --radius-sheet: 34px;       /* iOS Radius.sheet */
  --glass-blur: 40px;         /* iOS Shadow.glassLayer */
  --glass-blur-bg: 80px;      /* iOS Shadow.glassBackground */
  --surface-glass: rgba(255, 255, 255, .72);
  --surface-glass-chrome: rgba(255, 255, 255, .62);
  --border-glass: rgba(255, 255, 255, .55);
  --shadow-glass: 0 8px 32px rgba(26, 21, 35, .12), 0 1px 2px rgba(26, 21, 35, .06);

  /* ================================
     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);

  /* ================================
     Semantic Accent Tokens (다크 적응)
     원시 스케일(--color-primary-*)은 다크에서 재정의하지 않는다(모드 무관 재료).
     대신 이 시맨틱 토큰이 다크에서 한 단계 밝은 스텝을 가리키도록
     application.css .dark 블록에서 리맵한다 — iOS SOT
     (Packages/EasyBracketShared/Sources/DesignSystem/Color+Dark.swift §1.12,
     "다크 표면에서는 노출 색을 한 단계 밝게: primary500 → primary400")를
     600/700 스텝에도 동일 비율로 적용(600→500, 700→600).
     역할별로 분리 — 값이 같아도 용도(배경 채움/호버/텍스트)가 다르면 훗날
     서로 다른 스텝을 가리킬 수 있어야 한다.
     ================================ */
  /* 🔴 채움은 600 이 아니라 700 이다 (2026-08-14, 시안 `.mockups/raw-ref-221` 확정).
     600 위 흰 글자는 3.77:1 로 AA 미달이었다 — 브랜드 버튼 전체가 해당했다.
     다크는 400 + **어두운 글자**로 뒤집는다(9.10:1). 다크에서 면을 어둡게 하면
     표면과 붙으므로, iOS·Material 처럼 면을 밝히고 글자를 어둡게 하는 쪽이 정석이고
     §1.12-1 의 brand exposed swatch(다크 400)와도 일치한다.
     채움 위 글자는 반드시 `--theme-accent-on-solid` 를 쓴다 — `text-white` 를 박으면
     다크에서 2.54:1 로 무너진다. */
  --theme-accent-solid: var(--color-primary-700);       /* 버튼/칩 등 브랜드 배경 채움 (기본) */
  --theme-accent-solid-hover: var(--color-primary-800); /* 위 채움의 hover/강조 단계 */
  --theme-accent-on-solid: #FFFFFF;                     /* 위 두 채움 위에 얹는 글자·아이콘 */
  /* 🔴 600 이 아니라 700 이다 (2026-08-14 수리). 600 은 라이트에서 **모든 바탕에
     미달**이었다 — 흰 카드 3.77 · 바디 3.39 · muted 3.17 · tint 3.58 · tint-strong 3.32.
     소비처 216곳 중 114곳이 10~12px 소형 텍스트라 대형 텍스트 예외도 못 받는다.
     700 은 다섯 바탕 전부 통과(최악 4.61). 라이트에서 text-strong 과 같은 값이 되지만
     다크에서는 갈린다(text 500 / text-strong 400) — 토큰 분리는 그래서 유지한다. */
  --theme-accent-text: var(--color-primary-700);        /* 링크·아이콘 등 순수 텍스트 강조 */
  --theme-accent-outline: var(--color-primary-500);     /* border/ring 등 진한 브랜드색 선 강조 */

  /* 위 네 역할로 표현되지 않던 단계들 (2026-08-14). 뷰가 원시 스케일을 직접
     박고 있던 637곳이 여기 해당한다 — 스케일을 직접 쓰면 다크에서 다른 스텝을
     가리킬 지점 자체가 없다.
     다크 매핑은 시안 `.mockups/dark-step-6` 로 확정됐다(2026-08-14, A안 + 전경 400):
     950/900/900/800/700 · 전경 400. application.css `.dark` 블록에 있고, 결정 근거는
     `.planning/dark-step-6-decision.md`, 정본은 design_guide §1.12 다. */
  --theme-accent-text-strong: var(--color-primary-700);   /* 본문 위 진한 브랜드 전경 */
  --theme-accent-tint: var(--color-primary-50);           /* 아주 옅은 브랜드 배경 틴트 */
  --theme-accent-tint-strong: var(--color-primary-100);   /* 한 단계 진한 배경 틴트 */
  --theme-accent-line-subtle: var(--color-primary-200);   /* 가장 옅은 브랜드 선 */
  --theme-accent-line: var(--color-primary-300);          /* 브랜드 선 기본 */
  --theme-accent-line-strong: var(--color-primary-400);   /* 강조 선·포커스 링 */

  /* ================================
     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) ── */