/*
 * 디자인 토큰 - 토스(Toss) 스타일에서 영감을 받은 컬러/타이포/스페이싱 스케일.
 * 라이트 모드가 기본값이며, prefers-color-scheme과 수동 토글([data-theme]) 둘 다 지원한다.
 */
:root {
    /* Primary */
    --color-primary-500: #3182F6;
    --color-primary-600: #1B64DA;
    --color-primary-100: #E8F3FF;

    /* Neutral (텍스트/배경/보더) */
    --color-gray-900: #191F28;
    --color-gray-800: #333D4B;
    --color-gray-700: #4E5968;
    --color-gray-600: #6B7684;
    --color-gray-500: #8B95A1;
    --color-gray-400: #B0B8C1;
    --color-gray-300: #D1D6DB;
    --color-gray-200: #E5E8EB;
    --color-gray-100: #F2F4F6;
    --color-gray-50: #F9FAFB;
    --color-white: #FFFFFF;

    /* Semantic */
    --color-success: #00C471;
    --color-success-bg: #E3F9EE;
    --color-warning: #FF9800;
    --color-warning-bg: #FFF3E0;
    --color-danger: #F04452;
    --color-danger-bg: #FDEDEE;
    --color-danger-600: #D93A47;

    /* Surface / text roles (라이트 모드) */
    --surface-page: var(--color-gray-50);
    --surface-card: var(--color-white);
    --surface-sunken: var(--color-gray-100);
    --surface-overlay: rgba(15, 23, 42, 0.48);
    --text-primary: var(--color-gray-900);
    --text-secondary: var(--color-gray-600);
    --text-tertiary: var(--color-gray-500);
    --text-on-primary: var(--color-white);
    --border-default: var(--color-gray-200);
    --border-strong: var(--color-gray-300);
    --link-color: var(--color-primary-500);

    /* Typography */
    --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --fs-12: 0.75rem;
    --fs-13: 0.8125rem;
    --fs-14: 0.875rem;
    --fs-16: 1rem;
    --fs-18: 1.125rem;
    --fs-20: 1.25rem;
    --fs-24: 1.5rem;
    --fs-28: 1.75rem;

    /* Line-height / letter-spacing */
    --lh-tight: 1.3;
    --lh-normal: 1.6;
    --lh-relaxed: 1.75;
    --tracking-tight: -0.01em;

    /* Spacing (4px 기반) */
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-64: 64px;

    /* Radius */
    --radius-8: 8px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-24: 24px;
    --radius-pill: 999px;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.14), 0 4px 8px rgba(15, 23, 42, 0.06);

    --transition-fast: 120ms ease;
    --transition-base: 200ms ease;

    --z-nav: 100;
    --z-modal-backdrop: 900;
    --z-modal: 901;
    --z-toast: 950;

    --topnav-height: 56px;
}

/* 시스템 다크모드 자동 대응 (수동 토글이 라이트로 고정하지 않은 경우에만) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --surface-page: #0F1417;
        --surface-card: #191F28;
        --surface-sunken: #20272F;
        --surface-overlay: rgba(0, 0, 0, 0.6);
        --text-primary: #F2F4F6;
        --text-secondary: #B0B8C1;
        --text-tertiary: #8B95A1;
        --border-default: #2B333C;
        --border-strong: #3A424C;
        --color-primary-100: #16233A;
        --color-success-bg: #0F2C22;
        --color-warning-bg: #33260D;
        --color-danger-bg: #391418;
    }
}

/* 수동 다크모드 토글 (localStorage 'inspector-theme'로 저장) */
:root[data-theme="dark"] {
    --surface-page: #0F1417;
    --surface-card: #191F28;
    --surface-sunken: #20272F;
    --surface-overlay: rgba(0, 0, 0, 0.6);
    --text-primary: #F2F4F6;
    --text-secondary: #B0B8C1;
    --text-tertiary: #8B95A1;
    --border-default: #2B333C;
    --border-strong: #3A424C;
    --color-primary-100: #16233A;
    --color-success-bg: #0F2C22;
    --color-warning-bg: #33260D;
    --color-danger-bg: #391418;
}