/*
 * Travel UI 디자인 토큰 — 디자인 시스템 "Travel UI"의 tokens.json에서 생성 (직접 고치지 말고 디자인 시스템을 고친 뒤 다시 생성)
 * 라이트: :root / 다크: <html data-theme="dark">
 */

@font-face {
    font-family: "Pretendard";
    src: url("fonts/PretendardVariable.woff2") format("woff2-variations"), url("fonts/PretendardVariable.woff2") format("woff2");
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light;
    --font-sans: Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
    --color-bg: #F6F7F9;
    --color-surface: #FFFFFF;
    --color-surface-sub: #F9FAFB;
    --color-row-hover: #F6F8FC;
    --color-nav-hover: #F3F5F8;
    --color-text: #1A1D23;
    --color-text-2: #3A404B;
    --color-text-3: #5F6672;
    --color-text-4: #6B7280;
    --color-text-disabled: #B0B6BF;
    --color-border: #E4E7EC;
    --color-border-sub: #EEF0F3;
    --color-border-input: #CBD2DC;
    --color-primary: #122898;
    --color-primary-hover: #0D1F7A;
    --color-on-primary: #FFFFFF;
    --color-primary-soft: #E8ECFA;
    --color-primary-tint: #F3F5FD;
    --color-focus-halo: rgba(18,40,152,0.16);
    --color-danger: #C23434;
    --color-danger-strong: #A82C2C;
    --color-danger-soft: #FDECEC;
    --color-danger-line: #F1C4C4;
    --color-on-danger: #FFFFFF;
    --color-success: #167A4A;
    --color-success-soft: #E7F6EE;
    --color-success-line: #BFE3CF;
    --color-warning: #8A4B08;
    --color-warning-soft: #FDF0E1;
    --color-warning-line: #F2D9A8;
    --color-warning-tint: #FFFAF0;
    --color-chip-neutral: #EEF0F3;
    --color-toast: #1F2430;
    --color-on-toast: #FFFFFF;
    --color-overlay: rgba(17,24,39,0.45);
    --color-logo-ring: #6F7FD6;
    --color-logo-lens: #DDE2F7;
    --color-link: var(--color-primary);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 14px;
    --radius-full: 999px;
    --control-xs: 28px;
    --control-sm: 32px;
    --control-md: 36px;
    --control: 40px;
    --control-modal: 44px;
    --control-auth: 48px;
    --sidebar-width: 232px;
    --page-max: 100%;
    --table-row: 56px;
    --table-row-compact: 48px;
    --table-head: 38px;
    --modal-sm: 460px;
    --modal-md: 600px;
    --shadow-modal: 0 24px 60px rgba(16,24,40,0.22);
    --shadow-toast: 0 10px 30px rgba(16,24,40,0.25);
    --shadow-pop: 0 8px 24px rgba(16,24,40,0.10);
    --shadow-seg: 0 1px 2px rgba(16,24,40,0.08);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #0F1218;
    --color-surface: #171B23;
    --color-surface-sub: #1C212B;
    --color-row-hover: #1E2533;
    --color-nav-hover: #1E2533;
    --color-text: #E8EBF0;
    --color-text-2: #C3C9D3;
    --color-text-3: #9AA2AF;
    --color-text-4: #8E96A3;
    --color-text-disabled: #5A6272;
    --color-border: #2A303C;
    --color-border-sub: #232934;
    --color-border-input: #4A5366;
    --color-primary: #8A9CF5;
    --color-primary-hover: #A6B4F8;
    --color-on-primary: #0B1233;
    --color-primary-soft: #1E2754;
    --color-primary-tint: #182040;
    --color-focus-halo: rgba(138,156,245,0.30);
    --color-danger: #F08A84;
    --color-danger-strong: #F7B1AC;
    --color-danger-soft: #3A1A1C;
    --color-danger-line: #6B2E2E;
    --color-on-danger: #2A0B0B;
    --color-success: #5FCB93;
    --color-success-soft: #12301F;
    --color-success-line: #24563B;
    --color-warning: #E9A85A;
    --color-warning-soft: #33240F;
    --color-warning-line: #5A4317;
    --color-warning-tint: #241C0E;
    --color-chip-neutral: #262C38;
    --color-toast: #E8EBF0;
    --color-on-toast: #171B23;
    --color-overlay: rgba(0,0,0,0.60);
    --color-logo-ring: #5468C8;
    --color-logo-lens: #2A3570;
    --color-link: var(--color-primary);
    --shadow-modal: 0 24px 60px rgba(0,0,0,0.55);
    --shadow-toast: 0 10px 30px rgba(0,0,0,0.50);
    --shadow-pop: 0 8px 24px rgba(0,0,0,0.45);
    --shadow-seg: 0 1px 2px rgba(0,0,0,0.40);
}