/* 사용자 페이지 디자인 토큰 — 공공AX_디자인가이드.md 기준 */

:root {
    /* ── Primary Palette (§2.1) ───────────────────────────── */
    --primary-0:   #FFFFFF;
    --primary-5:   #F3F7FF;
    --primary-10:  #E6EFFF;
    --primary-20:  #B9D1FF;
    --primary-30:  #89B2FF;
    --primary-40:  #5992FF;
    --primary-50:  #2972FD; /* Basic — 메인 브랜드 */
    --primary-60:  #175BDB;
    --primary-70:  #0946B9;
    --primary-80:  #003497;
    --primary-90:  #002875;
    --primary-95:  #001D53;
    --primary-100: #000000;

    /* ── Neutral Palette (§2.2) ───────────────────────────── */
    --neutral-bg:           #F8F9FA;
    --neutral-disabled-bg:  #E0E4E8;
    --neutral-disabled-bd:  #CFD3D8;
    --neutral-subtle:       #6C757D;
    --neutral-basic:        #111111;

    /* ── System Status Colors (§2.3) ──────────────────────── */
    --status-critical: #FF4D4F; /* 매우 위험 */
    --status-danger:   #FA8C16; /* 위험 */
    --status-warning:  #FCD34D; /* 주의 */
    --status-success:  #40BA6F; /* 양호 */

    /* ── Spacing — 4px 배수 체계 (§5) ─────────────────────── */
    --spacing-0:  0;
    --spacing-1:  4px;
    --spacing-2:  8px;
    --spacing-3:  12px;
    --spacing-4:  16px;
    --spacing-5:  20px;
    --spacing-6:  24px;
    --spacing-7:  32px;
    --spacing-8:  40px;
    --spacing-9:  48px;
    --spacing-10: 64px;
    --spacing-11: 80px;

    /* ── Border Radius (§6) ───────────────────────────────── */
    --radius-none: 0;
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-full: 9999px;

    /* ── Shadow / Elevation (§7) ──────────────────────────── */
    --shadow-none: none;
    --shadow-sm:   0 1px 2px rgba(17, 17, 17, 0.06);
    --shadow-md:   0 4px 8px rgba(17, 17, 17, 0.08);
    --shadow-lg:   0 8px 16px rgba(17, 17, 17, 0.10);
    --shadow-xl:   0 16px 32px rgba(17, 17, 17, 0.12);

    /* ── Focus Outline — WCAG AA 필수 (§7-1) ──────────────── */
    /* outline-offset: -2px (inset)
       — 음수 offset으로 element 내부에 그려져 어떤 부모 컨테이너에도 잘리지 않음.
       — 카드·버튼 등 모든 컴포넌트에서 동일하게 안정적 표시.
       — width 2px과 동일한 음수값이라 외곽선이 요소 가장자리에 정확히 맞춰짐. */
    --focus-outline-color:  rgb(29, 104, 205);
    --focus-outline-style:  dashed;
    --focus-outline-width:  2px;
    --focus-outline-offset: -2px;
    --focus-outline:        2px dashed rgb(29, 104, 205);

    /* ── Motion (§12) ─────────────────────────────────────── */
    --motion-fast: 100ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Layout (§11) ─────────────────────────────────────── */
    --container-max:    1400px;
    --header-h-pc:      64px;
    --header-h-mobile:  56px;
    --sidebar-w:        240px;
    --sidebar-w-fold:   64px;

    /* ── Typography (§1) ──────────────────────────────────── */
    --font-family: 'Pretendard GOV', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    color-scheme: light;
}