/* UtilMonster Design Tokens — Wanted Montage (WDS) values.
   Mirrors github.com/wanteddev/montage-web packages/wds-theme (atomic/semantic). */
:root {
    /* Primary (Montage blue) */
    --color-primary: #0066FF; --color-primary-hover: #005EEB; --color-primary-active: #0054D1;
    --color-primary-weak: #EAF2FE; --color-primary-faint: #F7FBFF; --color-primary-fg: #FFFFFF;
    /* Status */
    --color-success: #00BF40; --color-warning: #FF9200; --color-danger: #FF4242; --color-info: #00AEFF;
    /* Neutrals (coolNeutral) */
    --color-bg: #F7F7F8; --color-surface: #FFFFFF; --color-surface-2: #F4F4F5; --color-surface-3: #EAEBEC;
    --color-border: #E1E2E4; --color-border-strong: #C2C4C8;
    --color-text: #171719; --color-text-sub: #46474C; --color-text-muted: #70737C;
    /* Typography (Montage scale + tracking) */
    --font-sans: "Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans KR",sans-serif;
    --fs-xs: 0.8125rem; --fs-sm: 0.875rem; --fs-base: 0.9375rem; --fs-md: 1rem; --fs-lg: 1.125rem;
    --fs-xl: 1.375rem; --fs-2xl: 1.5rem; --fs-3xl: 2rem; --fs-4xl: 3.5rem;
    --lh-tight: 1.3; --lh-normal: 1.6;
    --tracking-display: -0.0319em; --tracking-title: -0.0236em; --tracking-heading: -0.0194em;
    --tracking-body: 0.0057em; --tracking-label: 0.0145em;
    --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
    /* Spacing */
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
    --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px;
    --space-16: 64px; --space-18: 72px; --space-20: 80px;
    /* Radius (Montage framed-style) */
    --radius-sm: 12px; --radius-md: 14px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 9999px;
    /* Elevation — layered soft-key + ambient; warm-tinted dark (23,20,18) gives depth without coldness */
    --shadow-xs: 0 1px 1px rgba(23,20,18,0.05);
    --shadow-sm: 0 1px 2px rgba(23,20,18,0.05), 0 3px 6px rgba(23,20,18,0.04);
    --shadow-md: 0 2px 4px rgba(23,20,18,0.05), 0 8px 18px rgba(23,20,18,0.06);
    --shadow-lg: 0 4px 8px rgba(23,20,18,0.05), 0 18px 36px rgba(23,20,18,0.08);
    --shadow-xl: 0 8px 16px rgba(23,20,18,0.06), 0 30px 60px rgba(23,20,18,0.10);
    /* Focus / emphasis rings */
    --ring-primary: 0 0 0 3px var(--color-primary-weak);
    --ring-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary) 26%, transparent);
    /* Motion — ease-out exponential for a soft, premium "settling" feel */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 340ms;
    /* Semantic z-index scale */
    --z-sidebar: 90; --z-header: 100; --z-scrim: 150; --z-drawer: 160; --z-dropdown: 200; --z-toast: 300;
    --container-max: 1120px; --transition: var(--dur-base) var(--ease-out);
}
body.dark-mode {
    --color-primary: #3385FF; --color-primary-hover: #1A75FF; --color-primary-active: #0066FF;
    --color-primary-weak: #15233F; --color-primary-faint: #11192B;
    --color-success: #1ED45A; --color-warning: #FFA938; --color-danger: #FF6363;
    --color-bg: #1B1C1E; --color-surface: #212225; --color-surface-2: #292A2D; --color-surface-3: #333438;
    --color-border: #37383C; --color-border-strong: #46474C;
    --color-text: #F7F7F8; --color-text-sub: #C2C4C8; --color-text-muted: #989BA2;
}
