/* ============================================================
 * Design Tokens — v5 (Legacy Theme baseline + mockup overrides)
 * 기준: /web/mockup.html  (v4 폴더의 시연용 목업)
 * ============================================================ */

:root {
    /* ----- Core Colors ----- */
    --color-primary: #F0AD4E;
    /* 오렌지 — 주요 액션 */
    --color-primary-alt: #2566E8;
    /* 파랑 — 링크/info */
    --color-bg: #F4F5F7;
    /* 메인 배경 */
    --color-surface: #FFFFFF;
    --color-surface-alt: #FFF5E6;
    /* 연 오렌지 — 선택/hover */
    --color-neutral-100: #F8F9FA;
    --color-accent-muted: #FDE5C3;

    /* ----- Header (다크) ----- */
    --header-bg: #212529;
    --header-text: #FFFFFF;
    --header-text-muted: rgba(255, 255, 255, 0.6);
    --header-element-bg: rgba(255, 255, 255, 0.08);
    --header-element-hover: rgba(255, 255, 255, 0.16);
    --header-border: rgba(255, 255, 255, 0.15);

    /* ----- Text ----- */
    --text-primary: #333333;
    --text-secondary: #888888;
    --text-placeholder: #AAAAAA;

    /* ----- Border ----- */
    --border-subtle: #DEE2E6;

    /* ----- Button States ----- */
    --primary-hover: #E09635;
    --primary-active: #C98226;
    --primary-shadow: rgba(240, 173, 78, 0.25);
    --focus-ring: rgba(240, 173, 78, 0.5);

    /* ----- Semantic ----- */
    --color-success: #34C759;
    --color-warning: #F5A623;
    --color-danger: #FF2D55;
    --color-info: #2566E8;

    /* ----- Radii ----- */
    --radius-card: 8px;
    --radius-button: 6px;
    --radius-input: 6px;

    /* ----- Spacing ----- */
    --space-1: 8px;
    --space-2: 12px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;

    /* ----- Shadows ----- */
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.12);

    /* ----- Layout ----- */
    --sidebar-width: 260px;
    --sidebar-collapsed: 48px;
    --header-height: 56px;
    --insp-header-height: 52px;

    /* ----- Typography ----- */
    --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'D2 Coding', 'Courier New', monospace;
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 13px;
    --fs-md: 14px;
    --fs-lg: 16px;
    --fs-xl: 18px;
    --fs-2xl: 22px;
    --fs-3xl: 28px;
    --lh-tight: 1.35;
    --lh-base: 1.55;
    --lh-loose: 1.75;

    /* ----- Z-index ----- */
    --z-sticky: 50;
    --z-overlay: 500;
    --z-modal: 5000;
    --z-confirm: 9500;
    --z-toast: 9800;

    /* ----- Transition ----- */
    --tx-fast: 0.12s ease;
    --tx-base: 0.18s ease;
    --tx-slow: 0.32s ease;
}

/* ----- Dark surface (검측 화면 등) ----- */
:root {
    --dk-bg: #0F1115;
    --dk-surface: #15181D;
    --dk-surface-alt: #1A1D22;
    --dk-border: #25282D;
    --dk-text: #E8EAEC;
    --dk-text-muted: #B8BBC0;
    --dk-text-faint: #6B6E73;
}