/* ============================================================
   FencingMind Design System - CSS Variables (Design Tokens)
   All subdomains MUST use these variables for consistency
   ============================================================ */

/* Barlow Condensed - latin subset only. Hangul in a mixed element falls back
   to --fm-font-primary (Pretendard) by design. */
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/static/fonts/barlow-condensed-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+2013-2014, U+2026;
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/barlow-condensed-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+2013-2014, U+2026;
}

:root {
    /* ==================== COLORS ==================== */

    /* Background Colors - Dark Theme */
    --fm-bg-primary: #0a0a0f;           /* 메인 배경 */
    --fm-bg-secondary: #12121a;         /* 섹션 배경 */
    --fm-bg-tertiary: #1a1a25;          /* 카드 내부 배경 */
    --fm-bg-card: rgba(18, 18, 26, 0.85);      /* 글래스모피즘 카드 */
    --fm-bg-card-hover: rgba(26, 26, 37, 0.9); /* 카드 호버 */
    --fm-bg-input: rgba(255, 255, 255, 0.05);  /* 입력 필드 배경 */
    --fm-bg-overlay: rgba(10, 10, 15, 0.95);   /* 네비바/모달 오버레이 */

    /* Accent Colors - Korean Flag (태극기) Inspired */
    --fm-accent-primary: #c9302c;       /* 태극 빨강 - Primary CTA */
    --fm-accent-secondary: #1e3a8a;     /* 태극 파랑 - Secondary actions */
    --fm-accent-primary-hover: #a82824; /* 빨강 호버 */
    --fm-accent-secondary-hover: #172e6e; /* 파랑 호버 */

    /* Medal Colors - Rankings */
    --fm-medal-gold: #d4a574;           /* 금메달 - 1위 */
    --fm-medal-silver: #9ca3af;         /* 은메달 - 2위 */
    --fm-medal-bronze: #cd7f32;         /* 동메달 - 3위 */

    /* Text Colors */
    --fm-text-primary: #ffffff;         /* 주요 텍스트 */
    --fm-text-secondary: #b4b4c4;       /* 보조 텍스트 */
    --fm-text-muted: #9a9aad;           /* 비활성 텍스트 (다크: WCAG AA 대비 확보) */
    --fm-text-accent: #c9302c;          /* 강조 텍스트 */
    --fm-text-link: #60a5fa;            /* 링크 */
    --fm-text-link-hover: #93c5fd;      /* 링크 호버 */

    /* Status Colors */
    --fm-success: #10b981;              /* 성공/승리 */
    --fm-success-bg: rgba(16, 185, 129, 0.15);
    --fm-warning: #f59e0b;              /* 경고 */
    --fm-warning-bg: rgba(245, 158, 11, 0.15);
    --fm-danger: #ef4444;               /* 오류/패배 */
    --fm-danger-bg: rgba(239, 68, 68, 0.15);
    --fm-info: #3b82f6;                 /* 정보 */
    --fm-info-bg: rgba(59, 130, 246, 0.15);

    /* Border Colors */
    --fm-border: rgba(255, 255, 255, 0.08);
    --fm-border-light: rgba(255, 255, 255, 0.15);
    --fm-border-focus: var(--fm-accent-primary);

    /* Glow Effects */
    --fm-glow-primary: rgba(201, 48, 44, 0.3);
    --fm-glow-secondary: rgba(30, 58, 138, 0.3);
    --fm-glow-gold: rgba(212, 165, 116, 0.4);

    /* ==================== TYPOGRAPHY ==================== */

    /* Font Family */
    --fm-font-primary: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --fm-font-display: 'Barlow Condensed', var(--fm-font-primary);   /* 스코어보드 숫자 */
    --fm-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Font Sizes */
    --fm-text-xs: 0.75rem;      /* 12px */
    --fm-text-sm: 0.875rem;     /* 14px */
    --fm-text-base: 1rem;       /* 16px */
    --fm-text-lg: 1.125rem;     /* 18px */
    --fm-text-xl: 1.25rem;      /* 20px */
    --fm-text-2xl: 1.5rem;      /* 24px */
    --fm-text-3xl: 1.875rem;    /* 30px */
    --fm-text-4xl: 2.25rem;     /* 36px */
    --fm-text-5xl: 3rem;        /* 48px - display */

    /* Font Weights */
    --fm-font-normal: 400;
    --fm-font-medium: 500;
    --fm-font-semibold: 600;
    --fm-font-bold: 700;
    --fm-font-extrabold: 800;   /* strong headings (Pretendard) */
    --fm-font-black: 900;        /* display / hero */

    /* Line Heights */
    --fm-leading-tight: 1.25;
    --fm-leading-normal: 1.5;
    --fm-leading-relaxed: 1.75;

    /* Letter Spacing (Tracking) - craft floor: -0.04em */
    --fm-tracking-tighter: -0.03em;  /* large display headings */
    --fm-tracking-tight: -0.02em;    /* headings */
    --fm-tracking-normal: 0em;

    /* ==================== SPACING ==================== */
    --fm-space-1: 0.25rem;      /* 4px */
    --fm-space-2: 0.5rem;       /* 8px */
    --fm-space-3: 0.75rem;      /* 12px */
    --fm-space-4: 1rem;         /* 16px */
    --fm-space-5: 1.25rem;      /* 20px */
    --fm-space-6: 1.5rem;       /* 24px */
    --fm-space-8: 2rem;         /* 32px */
    --fm-space-10: 2.5rem;      /* 40px */
    --fm-space-12: 3rem;        /* 48px */
    --fm-space-16: 4rem;        /* 64px */

    /* ==================== BORDERS ====================
       Shape scale — three steps, no in-between values. Every border-radius in
       the shared shell resolves to one of these:
         sm   버튼, 인풋, 탭, 배지, 카드 *내부* 요소
         md   카드, 패널, 컨테이너, 섹션, 테이블, 팝오버
         pill 칩 / 상태 배지 등 알약형 전용 (한 줄 텍스트 + 좌우 여백)
       Exceptions that intentionally stay literal: 50% (아바타·원형 뱃지·스피너),
       대진표(bracket.css)·차트 막대처럼 형태 자체가 기능인 요소. */
    --fm-radius-sm: 8px;
    --fm-radius-md: 12px;
    --fm-radius-pill: 999px;
    --fm-radius-full: var(--fm-radius-pill);  /* alias */

    /* ==================== BADGE / CHIP SCALE ====================
       Every inline label uses one of three tiers. Pick by role, not by looks:
         micro     카드 내부 상태 라벨 — 흐름을 끊지 않는 크기
         standard  기본 배지 — 고정 높이라 나란히 놓이면 라인이 맞는다
         chip      독립 칩 (클릭 가능) — 터치 타깃 확보
       A badge must be inline-flex with line-height 1: padding alone leaves the
       height at the mercy of font metrics, which is why these used to sit off
       the baseline next to each other. */
    --fm-badge-pad-sm: 2px 8px;      /* micro */
    --fm-badge-pad-md: 4px 10px;     /* standard */
    --fm-badge-pad-lg: 6px 14px;     /* chip */
    --fm-badge-fs-sm: 0.7rem;
    --fm-badge-fs-md: 0.75rem;
    --fm-badge-height: 24px;         /* standard badge — fixed for line-up */
    --fm-chip-height: 32px;          /* chip — clickable, needs a real target */

    /* ==================== SHADOWS ==================== */
    --fm-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --fm-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --fm-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --fm-shadow-glow: 0 0 20px var(--fm-glow-primary);

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

    /* ==================== Z-INDEX ==================== */
    --fm-z-dropdown: 100;
    --fm-z-sticky: 200;
    --fm-z-fixed: 500;
    --fm-z-modal-backdrop: 900;
    --fm-z-modal: 1000;
    --fm-z-tooltip: 1100;
    --fm-z-toast: 1200;

    /* ==================== LAYOUT ==================== */
    --fm-container-sm: 640px;
    --fm-container-md: 768px;
    --fm-container-lg: 1024px;
    --fm-container-xl: 1200px;
    --fm-container-2xl: 1400px;

    --fm-navbar-height: 60px;
    --fm-sidebar-width: 280px;
}

/* ==================== BASE TYPOGRAPHY ==================== */
/* Tabular numerals: data figures (rank, points, scores, dates, counts) render
   at equal width so digits line up in columns across the whole data platform. */
body {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* Type hierarchy established with WEIGHT + TRACKING + line-height (not raw scale)
   so the step from title -> heading -> body is obvious. Color is left to the
   per-theme rules (dark-theme.css / light tokens), so contrast is untouched. */
h1, h2, h3 {
    font-weight: var(--fm-font-bold);
    line-height: var(--fm-leading-tight);
    letter-spacing: var(--fm-tracking-tight);
}
h1 {
    font-weight: var(--fm-font-extrabold);
    line-height: 1.2;
    letter-spacing: var(--fm-tracking-tighter);
}
h3 {
    font-weight: var(--fm-font-semibold);
}

/* Display numerals — 랭크/포인트/스코어/D-day 등 데이터 숫자의 스코어보드 보이스 */
.fm-num {
    font-family: var(--fm-font-display);
    font-weight: 700;
    letter-spacing: 0.01em;   /* 콘덴스드는 음수 자간 금지 */
    font-variant-numeric: lining-nums;
}
.fm-num--semi {
    font-weight: 600;
}

/* Uppercase micro label — 데이터 라벨 (eyebrow/섹션 라벨 아님) */
.fm-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* ==================== GLASSMORPHISM UTILITIES ==================== */
.fm-glass {
    background: var(--fm-bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--fm-border);
}

.fm-glass-dark {
    background: var(--fm-bg-overlay);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--fm-border);
}

/* ==================== LIGHT THEME (ko, ja, zh) ==================== */
[data-theme="light"] {
    /* Background - Apple/Toss style */
    --fm-bg-primary: #ffffff;
    --fm-bg-secondary: #f5f5f7;
    --fm-bg-tertiary: #f0f0f5;
    --fm-bg-card: #ffffff;
    --fm-bg-card-hover: #f9f9fb;
    --fm-bg-input: #f5f5f7;
    --fm-bg-overlay: rgba(255, 255, 255, 0.95);

    /* Accent - same across themes */
    --fm-accent-primary: #c9302c;
    --fm-accent-secondary: #1e3a8a;
    --fm-accent-primary-hover: #a82824;
    --fm-accent-secondary-hover: #172e6e;

    /* Text - Toss/Apple style */
    --fm-text-primary: #191f28;
    --fm-text-secondary: #4e5968;
    --fm-text-muted: #6b7280;  /* 라이트: WCAG AA 대비 확보 (흰 배경 ≈4.8:1) */
    --fm-text-accent: #c9302c;
    --fm-text-link: #1e3a8a;
    --fm-text-link-hover: #2d4cab;

    /* Status */
    --fm-success-bg: rgba(16, 185, 129, 0.1);
    --fm-warning-bg: rgba(245, 158, 11, 0.1);
    --fm-danger-bg: rgba(239, 68, 68, 0.1);
    --fm-info-bg: rgba(59, 130, 246, 0.1);

    /* Border */
    --fm-border: rgba(0, 0, 0, 0.08);
    --fm-border-light: rgba(0, 0, 0, 0.12);

    /* Glow - disabled in light theme */
    --fm-glow-primary: transparent;
    --fm-glow-secondary: transparent;
    --fm-glow-gold: transparent;

    /* Shadow - light theme uses shadows for depth */
    --fm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --fm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --fm-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --fm-shadow-glow: none;
}

[data-theme="light"] .fm-glass {
    background: var(--fm-bg-card);
    backdrop-filter: none;
    border: 1px solid var(--fm-border);
    box-shadow: var(--fm-shadow-sm);
}

[data-theme="light"] .fm-glass-dark {
    background: var(--fm-bg-overlay);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--fm-border);
}