/* ==========================================================================
   ELIMS Design Tokens
   ==========================================================================
   모든 색상·간격·폰트 값의 단일 출처.
   화면/컴포넌트 CSS는 반드시 이 파일의 var(--token)을 사용.
   ==========================================================================*/

/* -----------------------------------------------------------------
   Pretendard Variable 웹폰트 (로컬)
   ----------------------------------------------------------------- */
@font-face {
    font-family: 'Pretendard Variable';
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/pretendard/PretendardVariable.woff2') format('woff2-variations');
}

/* =================================================================
   :root — Light 테마 (기본)
   =================================================================*/
:root {

    /* --- 1. Primary 스케일 (Blue) -------------------------------- */
    --color-primary-50 : #EFF6FF;
    --color-primary-100: #DBEAFE;
    --color-primary-200: #BFDBFE;
    --color-primary-300: #93C5FD;
    --color-primary-400: #60A5FA;
    --color-primary-500: #3B82F6;
    --color-primary-600: #2563EB;   /* ← base */
    --color-primary-700: #1D4ED8;
    --color-primary-800: #1E40AF;
    --color-primary-900: #1E3A8A;
    --color-primary-rgb: 37, 99, 235;

    /* --- 2. Neutral (Slate) 스케일 ------------------------------- */
    --color-neutral-0  : #FFFFFF;
    --color-neutral-50 : #F8FAFC;
    --color-neutral-100: #F1F5F9;
    --color-neutral-200: #E2E8F0;
    --color-neutral-300: #CBD5E1;
    --color-neutral-400: #94A3B8;
    --color-neutral-500: #64748B;
    --color-neutral-600: #475569;
    --color-neutral-700: #334155;
    --color-neutral-800: #1E293B;
    --color-neutral-900: #0F172A;

    /* --- 3. 시멘틱 컬러 ----------------------------------------- */
    --color-success       : #16A34A;
    --color-success-soft  : #DCFCE7;
    --color-warning       : #D97706;
    --color-warning-soft  : #FEF3C7;
    --color-danger        : #DC2626;
    --color-danger-soft   : #FEE2E2;
    --color-info          : #0891B2;
    --color-info-soft     : #CFFAFE;

    /* --- 3-1. 업무 상태(Workflow Status) 전용 팔레트 ------------- */
    /* 시료 접수 → 배정 → 진행 → 완료 → 검토 → 승인 → 발행 */
    --status-rcpt-bg : #DBEAFE;  --status-rcpt-fg : #1D4ED8;
    --status-asgn-bg : #E0E7FF;  --status-asgn-fg : #4338CA;
    --status-prog-bg : #FEF3C7;  --status-prog-fg : #B45309;
    --status-cmpt-bg : #D1FAE5;  --status-cmpt-fg : #047857;
    --status-revw-bg : #FDE68A;  --status-revw-fg : #92400E;
    --status-appr-bg : #A7F3D0;  --status-appr-fg : #065F46;
    --status-issd-bg : #6EE7B7;  --status-issd-fg : #064E3B;

    /* --- 3-2. Overlay / Translucent ----------------------------- */
    --overlay-backdrop   : rgba(15, 23, 42, 0.40);
    --overlay-loading    : rgba(255, 255, 255, 0.50);
    --overlay-dropdown-border : rgba(15, 23, 42, 0.06);
    --overlay-sidebar-hover   : rgba(255, 255, 255, 0.06);
    --overlay-shadow-modal    : 0 20px 60px rgba(15, 23, 42, 0.15);
    --overlay-shadow-sidebar  : 2px 0 16px rgba(15, 23, 42, 0.10);

    /* --- 4. Surface (테마 스위칭 대응 추상층) --------------------- */
    --surface-bg       : var(--color-neutral-0);
    --surface-card     : var(--color-neutral-0);
    --surface-sidebar  : var(--color-neutral-100);
    --surface-header   : rgba(255, 255, 255, 0.88);
    --surface-hover    : var(--color-neutral-100);
    --surface-active   : var(--color-primary-50);
    --surface-muted    : var(--color-neutral-100);
    --surface-disabled : var(--color-neutral-200);   /* 읽기전용/비활성 입력 배경 — 폼 배경보다 한 단계 진하게 */

    --text-primary     : var(--color-neutral-800);
    --text-secondary   : var(--color-neutral-600);
    --text-muted       : var(--color-neutral-500);   /* KWCAG 4.5:1 - #64748B on white = 4.78:1 */
    --text-subtle      : var(--color-neutral-400);   /* 순수 장식/테두리 색(대비 요구 없음) */
    --text-inverse     : var(--color-neutral-0);
    --text-link        : var(--color-primary-600);

    --border-subtle    : var(--color-neutral-100);
    --border-default   : var(--color-neutral-200);
    --border-strong    : var(--color-neutral-300);

    /* --- 5. 타이포그래피 ---------------------------------------- */
    --font-family-sans : 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
                          system-ui, 'Segoe UI', 'Malgun Gothic', 'Apple SD Gothic Neo',
                          'Noto Sans KR', sans-serif;
    --font-family-mono : 'JetBrains Mono', 'D2Coding', Consolas, 'Courier New', monospace;

    --text-xs   : 0.75rem;    /* 12px */
    --text-sm   : 0.8125rem;  /* 13px */
    --text-base : 0.875rem;   /* 14px */
    --text-md   : 1rem;       /* 16px */
    --text-lg   : 1.125rem;   /* 18px */
    --text-xl   : 1.5rem;     /* 24px */
    --text-2xl  : 1.875rem;   /* 30px */

    --font-weight-regular : 400;
    --font-weight-medium  : 500;
    --font-weight-semibold: 600;
    --font-weight-bold    : 700;
    --font-weight-black   : 800;

    --line-height-tight : 1.25;
    --line-height-normal: 1.5;
    --line-height-loose : 1.75;

    --letter-spacing-tight : -0.01em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide  : 0.03em;

    /* --- 6. 간격 (8pt grid) ------------------------------------- */
    --space-0 : 0;
    --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-16: 64px;

    /* --- 7. 모서리 ---------------------------------------------- */
    --radius-xs   : 4px;
    --radius-sm   : 6px;
    --radius-md   : 8px;
    --radius-lg   : 12px;
    --radius-xl   : 16px;
    --radius-full : 9999px;

    /* --- 8. 그림자 ---------------------------------------------- */
    --shadow-xs : 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm : 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md : 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --shadow-lg : 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
    --shadow-xl : 0 20px 25px -5px rgba(15, 23, 42, 0.10);

    /* 하위호환 별칭 (점진적 제거 예정) */
    --shadow-card: var(--shadow-sm);

    /* --- 9. 모션 ------------------------------------------------ */
    --motion-fast   : 150ms;
    --motion-normal : 250ms;
    --motion-slow   : 400ms;
    --motion-ease   : cubic-bezier(0.4, 0, 0.2, 1);
    --transition    : all var(--motion-normal) var(--motion-ease);

    /* --- 10. 레이아웃 ------------------------------------------- */
    --layout-sidebar-width          : 208px;
    --layout-sidebar-width-collapsed: 64px;
    --layout-sidebar-width-rail     : 76px;
    --layout-header-height          : 56px;
    --layout-tab-height             : 40px;
    --layout-tab-pinned-width       : 44px;
    --layout-z-sidebar              : 1030;
    --layout-z-header               : 1020;
    --layout-z-dropdown             : 1050;
    --layout-z-modal                : 1060;
    --layout-z-toast                : 1080;
    --layout-z-context-menu         : 1070;

    /* --- 11. 인디케이터 ----------------------------------------- */
    --tab-dirty-dot: var(--color-warning);
    --menu-group-label: var(--color-neutral-500);  /* 대비 상향 */
    --active-accent-width: 4px;


    /* =============================================================
       ↓ 레거시 별칭 — common.css 리팩토링 중 점진 교체용
       ============================================================= */
    --sidebar-width      : var(--layout-sidebar-width);
    --sidebar-bg         : var(--surface-sidebar);
    --sidebar-text       : var(--text-secondary);
    --sidebar-active     : var(--color-primary-700);
    --sidebar-active-bg  : var(--color-primary-50);

    --primary            : var(--color-primary-600);
    --primary-rgb        : var(--color-primary-rgb);
    --primary-light      : var(--color-primary-50);
    --success            : var(--color-success);
    --danger             : var(--color-danger);
    --warning            : var(--color-warning);
    --info               : var(--color-info);
    --content-bg         : var(--surface-bg);
    --card-bg            : var(--surface-card);
    --text-color         : var(--text-primary);
    /* --text-muted 이미 위에서 정의됨 */
    --border-color       : var(--border-default);
    --topbar-bg          : var(--surface-header);
    --header-height      : var(--layout-header-height);
    --tab-height         : var(--layout-tab-height);

    --gradient-primary   : linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-800) 100%);
}

/* =================================================================
   Dark 테마 (M-1)
   =================================================================*/
[data-theme="dark"] {
    --surface-bg      : var(--color-neutral-900);
    --surface-card    : var(--color-neutral-800);
    --surface-sidebar : var(--color-neutral-900);
    --surface-header  : rgba(15, 23, 42, 0.92);
    --surface-hover   : var(--color-neutral-700);
    --surface-active  : rgba(96, 165, 250, 0.18);
    --surface-muted   : var(--color-neutral-800);
    --surface-disabled: var(--color-neutral-700);

    --text-primary    : var(--color-neutral-50);
    --text-secondary  : var(--color-neutral-300);
    --text-muted      : var(--color-neutral-400);
    --text-inverse    : var(--color-neutral-900);
    --text-link       : var(--color-primary-300);

    --border-subtle   : var(--color-neutral-800);
    --border-default  : var(--color-neutral-700);
    --border-strong   : var(--color-neutral-600);

    /* 상태 배지 — 다크 최적화 */
    --status-rcpt-bg : #1E3A8A;  --status-rcpt-fg : #BFDBFE;
    --status-asgn-bg : #3730A3;  --status-asgn-fg : #C7D2FE;
    --status-prog-bg : #92400E;  --status-prog-fg : #FDE68A;
    --status-cmpt-bg : #065F46;  --status-cmpt-fg : #A7F3D0;
    --status-revw-bg : #78350F;  --status-revw-fg : #FDE68A;
    --status-appr-bg : #064E3B;  --status-appr-fg : #A7F3D0;
    --status-issd-bg : #064E3B;  --status-issd-fg : #6EE7B7;

    --overlay-backdrop   : rgba(0, 0, 0, 0.60);
    --overlay-loading    : rgba(15, 23, 42, 0.60);
    --overlay-dropdown-border : rgba(255, 255, 255, 0.06);
    --overlay-shadow-modal    : 0 20px 60px rgba(0, 0, 0, 0.40);
    --overlay-shadow-sidebar  : 2px 0 16px rgba(0, 0, 0, 0.40);

    /* Soft 팔레트 — 다크 배경용 진한 톤 */
    --color-primary-50   : #1E3A8A;
    --color-primary-100  : #1E40AF;
    --color-warning-soft : #78350F;
    --color-success-soft : #064E3B;
    --color-info-soft    : #164E63;
    --color-danger-soft  : #7F1D1D;
    --color-primary-600  : #3B82F6;   /* 더 밝은 primary for dark */
    --color-primary-700  : #60A5FA;
}

/* Auto: OS prefers-color-scheme 추종 */
[data-theme="auto"] { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --surface-bg      : var(--color-neutral-900);
        --surface-card    : var(--color-neutral-800);
        --surface-sidebar : var(--color-neutral-900);
        --surface-header  : rgba(15, 23, 42, 0.92);
        --surface-hover   : var(--color-neutral-700);
        --surface-active  : rgba(96, 165, 250, 0.18);
        --surface-muted   : var(--color-neutral-800);
        --surface-disabled: var(--color-neutral-700);

        --text-primary    : var(--color-neutral-50);
        --text-secondary  : var(--color-neutral-300);
        --text-muted      : var(--color-neutral-400);
        --text-inverse    : var(--color-neutral-900);
        --text-link       : var(--color-primary-300);

        --border-subtle   : var(--color-neutral-800);
        --border-default  : var(--color-neutral-700);
        --border-strong   : var(--color-neutral-600);

        --overlay-backdrop   : rgba(0, 0, 0, 0.60);
        --overlay-loading    : rgba(15, 23, 42, 0.60);
        --overlay-dropdown-border : rgba(255, 255, 255, 0.06);
        --overlay-shadow-modal    : 0 20px 60px rgba(0, 0, 0, 0.40);
        --overlay-shadow-sidebar  : 2px 0 16px rgba(0, 0, 0, 0.40);
    }
}

/* =================================================================
   High Contrast (M-2) — KWCAG 2.2 AAA (명도대비 7:1+)
   =================================================================*/
[data-theme="hc"] {
    --surface-bg       : #FFFFFF;
    --surface-card     : #FFFFFF;
    --surface-sidebar  : #FFFFFF;
    --surface-header   : #FFFFFF;
    --surface-hover    : #E6E6E6;
    --surface-active   : #FFFF00;   /* 시스템 하이라이트 노랑 */
    --surface-muted    : #F2F2F2;
    --surface-disabled : #DDDDDD;

    --text-primary     : #000000;
    --text-secondary   : #1A1A1A;
    --text-muted       : #333333;
    --text-inverse     : #FFFFFF;
    --text-link        : #0000EE;

    --border-subtle    : #000000;
    --border-default   : #000000;
    --border-strong    : #000000;

    --color-primary-600: #0033CC;
    --color-primary-700: #002299;
    --color-primary-50 : #E6EEFF;
    --color-primary-100: #CCDDFF;
    --color-primary-200: #99BBFF;
    --color-primary-300: #6699FF;
    --color-primary-400: #3366FF;

    --color-success    : #006600;
    --color-success-soft: #CCFFCC;
    --color-warning    : #994400;
    --color-warning-soft: #FFDDBB;
    --color-danger     : #CC0000;
    --color-danger-soft: #FFD6D6;
    --color-info       : #006699;
    --color-info-soft  : #CCEEFF;

    /* 모든 보더 진하게 */
    --shadow-xs : 0 0 0 1px #000000;
    --shadow-sm : 0 0 0 1px #000000;
    --shadow-md : 0 0 0 2px #000000;
    --shadow-lg : 0 0 0 2px #000000;
    --shadow-xl : 0 0 0 3px #000000;
    --shadow-card: 0 0 0 1px #000000;
}
[data-theme="hc"] body,
[data-theme="hc"] .elims-menu-link,
[data-theme="hc"] .nav-link {
    font-weight: var(--font-weight-semibold) !important;
}
[data-theme="hc"] *:focus-visible {
    outline: 3px solid #FF6600 !important;
    outline-offset: 2px !important;
}

/* =================================================================
   Compact Density (M-3)
   =================================================================*/
[data-density="compact"] {
    --space-2: 6px;
    --space-3: 8px;
    --space-4: 12px;
    --space-5: 16px;
    --space-6: 18px;
    --space-8: 24px;
    --text-base : 0.8125rem;
    --layout-header-height: 48px;
    /* --layout-tab-height: 기본 40px 유지 (탭이 너무 작아지는 것 방지) */
}
[data-density="compact"] .elims-menu-link { padding: 6px var(--space-3); }
[data-density="compact"] .stat-card { padding: var(--space-3); }
[data-density="compact"] .stat-card .stat-value { font-size: var(--text-xl); }
[data-density="compact"] .elims-grid thead th,
[data-density="compact"] .elims-grid tbody td { padding: 6px var(--space-3); }
[data-density="compact"] .search-area { padding: var(--space-2) var(--space-3); }
[data-density="compact"] .card-header { padding: var(--space-2) var(--space-3); }
[data-density="compact"] .form-control,
[data-density="compact"] .form-select { padding: 4px var(--space-2); }

[data-density="spacious"] {
    --space-2: 10px;
    --space-3: 16px;
    --space-4: 20px;
    --space-5: 24px;
    --space-6: 32px;
    --text-base : 0.9375rem;
    --layout-header-height: 64px;
    --layout-tab-height   : 46px;
}

/* =================================================================
   Color-blind palette (M-4) — 상태 뱃지 색각 보정
   Deuteranopia(적록), Protanopia(적록), Tritanopia(청황) 대비 확보
   =================================================================*/
[data-cb="deuteranopia"],
[data-cb="protanopia"] {
    /* 적/녹 구분 대신 파랑/주황 대비 사용 */
    --color-success      : #0072B2;   /* Blue  (적합) */
    --color-success-soft : #CFE2F3;
    --color-danger       : #D55E00;   /* Orange(부적합) */
    --color-danger-soft  : #FCE5CD;
    --color-warning      : #E69F00;
    --color-warning-soft : #FFF2CC;

    --status-cmpt-bg : #CFE2F3; --status-cmpt-fg : #0072B2;
    --status-appr-bg : #CFE2F3; --status-appr-fg : #004B7F;
    --status-issd-bg : #A6C5E5; --status-issd-fg : #002A55;
}
[data-cb="tritanopia"] {
    /* 청/황 구분 대신 빨강/녹청 대비 */
    --color-success      : #117733;
    --color-success-soft : #D5F0DE;
    --color-danger       : #CC3311;
    --color-danger-soft  : #FBE5DE;
    --color-warning      : #882255;
    --color-warning-soft : #F5DDE5;
}

/* =================================================================
   Reduced Motion (M-4)
   =================================================================*/
[data-motion="reduced"] *,
[data-motion="reduced"] *::before,
[data-motion="reduced"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
    [data-motion="auto"] *,
    [data-motion="auto"] *::before,
    [data-motion="auto"] *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* =================================================================
   Bootstrap 5 변수 매핑
   (Bootstrap 컴포넌트가 자동으로 토큰값을 따르게 함)
   =================================================================*/
:root {
    --bs-primary            : var(--color-primary-600);
    --bs-primary-rgb        : var(--color-primary-rgb);
    --bs-primary-text-emphasis: var(--color-primary-800);
    --bs-primary-bg-subtle  : var(--color-primary-50);
    --bs-primary-border-subtle: var(--color-primary-200);

    --bs-success            : var(--color-success);
    --bs-warning            : var(--color-warning);
    --bs-danger             : var(--color-danger);
    --bs-info               : var(--color-info);

    --bs-body-bg            : var(--surface-bg);
    --bs-body-color         : var(--text-primary);
    --bs-secondary-color    : var(--text-secondary);
    --bs-tertiary-color     : var(--text-muted);

    /* Bootstrap 카드/폼 변수 매핑 — 다크 모드 전환 대응 */
    --bs-card-bg            : var(--surface-card);
    --bs-card-cap-bg        : var(--surface-card);
    --bs-card-color         : var(--text-primary);
    --bs-card-border-color  : var(--border-default);
    --bs-emphasis-color     : var(--text-primary);
    --bs-body-tertiary-bg   : var(--surface-muted);
    --bs-secondary-bg       : var(--surface-muted);

    --bs-border-color       : var(--border-default);
    --bs-border-color-translucent: var(--border-subtle);

    --bs-font-sans-serif    : var(--font-family-sans);
    --bs-body-font-family   : var(--font-family-sans);
    --bs-body-font-size     : var(--text-base);
    --bs-body-font-weight   : var(--font-weight-regular);
    --bs-body-line-height   : var(--line-height-normal);

    --bs-border-radius      : var(--radius-sm);
    --bs-border-radius-sm   : var(--radius-xs);
    --bs-border-radius-lg   : var(--radius-lg);
    --bs-border-radius-xl   : var(--radius-xl);
    --bs-border-radius-pill : var(--radius-full);

    --bs-link-color         : var(--color-primary-600);
    --bs-link-hover-color   : var(--color-primary-700);
}