/* ============================================================
 *  theme.css — 전역 컬러/타이포 토큰 + 공통 베이스
 *  Login / Admin 양쪽에서 모두 로드됨
 * ============================================================ */

:root {
    /* Brand */
    --navy-900: #0b1554;
    --navy-800: #141f6e;
    --navy-700: #1c2a8c;
    --navy-600: #2a3aa8;
    --navy-100: #dde2f4;
    --navy-50:  #eef0fb;
    --red:      #e2192c;

    /* Ink (text & neutrals) */
    --ink-900: #0f172a;
    --ink-800: #1e293b;
    --ink-700: #334155;
    --ink-600: #475569;
    --ink-500: #64748b;
    --ink-400: #94a3b8;
    --ink-300: #cbd5e1;
    --ink-200: #e2e8f0;
    --ink-100: #f1f5f9;
    --ink-50:  #f8fafc;
    --white:   #ffffff;

    /* Surfaces */
    --bg-page: #f4f6fb;

    /* Sidebar — 블루 슬레이트 보안 콘솔 톤 */
    --sb-bg:          #152033;
    --sb-bg-2:        #1c2942;
    --sb-border:      rgba(255,255,255,0.08);
    --sb-text:        #c7cde5;
    --sb-text-dim:    #8089ab;
    --sb-text-bright: #ffffff;
    --sb-hover:       rgba(255,255,255,0.05);
    --sb-active-bg:   rgba(99,128,255,0.14);
    --sb-active-fg:   #ffffff;
    --sb-accent:      #6380ff;

    /* Geometry */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    --shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.04);
    --shadow-focus: 0 0 0 4px rgba(28,42,140,.12);

    /* Layout dims */
    --sidebar-w: 260px;
    --header-h:  72px;

    color-scheme: light;
}

/* ============================================================
 *  Dark theme — html[data-theme="dark"] 에서 컬러 토큰만 재정의.
 *  변수 이름은 유지하므로 var() 기반 화면이 자동 전환된다.
 *  (Login 화면은 _LoginLayout 사용 → 영향 없음)
 * ============================================================ */
html[data-theme="dark"] {
    color-scheme: dark;

    /* Surfaces */
    --bg-page: #0b1120;
    --white:   #161e2e;   /* 카드·헤더 surface (페이지보다 밝게) */

    /* Ink — 라이트의 명도 스케일을 반전: 900=밝은 텍스트 … 50=어두운 배경 */
    --ink-900: #f1f5f9;
    --ink-800: #e2e8f0;
    --ink-700: #cbd5e1;
    --ink-600: #aab6c8;
    --ink-500: #8c99ac;
    --ink-400: #64748b;
    --ink-300: #475569;
    --ink-200: #2c3a4f;   /* 보더 */
    --ink-100: #232f43;   /* hover 배경 */
    --ink-50:  #1b2436;   /* 옅은 배경 */

    /* calc-badge 등 옅은 navy 표면 보정 */
    --navy-50:  #1e2a52;
    --navy-100: #2a3a6e;
    --navy-700: #aab9ff;

    --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
}

/* 사이드바 로고 타일은 다크에서도 밝게 유지(브랜드 가독성) */
html[data-theme="dark"] .sidebar-brand .logo-tile { background: #fff; }

/* 테마 토글 아이콘 — 현재 모드에서 "전환될 모드" 아이콘만 노출 */
#theme-toggle .theme-icon-light { display: none; }
#theme-toggle .theme-icon-dark  { display: inline-block; }
html[data-theme="dark"] #theme-toggle .theme-icon-light { display: inline-block; }
html[data-theme="dark"] #theme-toggle .theme-icon-dark  { display: none; }

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--ink-900);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 14px;
}

/* 테마 전환 시 부드러운 색 전환 */
body, .header, .sidebar, .content-card, .icon-btn, .user-chip, .calc-badge {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }