/*
 * DYB NHR Portal — Design Tokens
 *
 * CSS custom properties for the sidebar/header redesign.
 * Light theme on :root (default), dark theme on [data-theme="dark"].
 *
 * Load order in layout.html:
 *   1) tailwind.min.css  (utility classes)
 *   2) tokens.css        (this file — must come AFTER tailwind so tokens can
 *                         be referenced in component CSS without being
 *                         overwritten by tailwind resets)
 *   3) bootstrap-icons.min.css
 *   4) dyb-table.css (component CSS)
 *
 * Source of truth: ~/design-handoff/design_handoff_sidebar_header/README.md
 */

:root {
  color-scheme: light;
  /* Brand — theme-invariant */
  --primary: #B01116;
  --primary-hover: #c41118;
  --primary-container: rgba(176, 17, 22, .10);
  --primary-soft: rgba(176, 17, 22, .06);
  --success: #16a34a;
  --warning: #d97706;
  --danger:  #dc2626;
  --info:    #2563eb;

  /* Light theme (default) — rose-neutral content + DYB deep red chrome
     Content tier: page-bg < surface (카드 떠보임) — rose-neutral hue ~8°
     Chrome tier:  사이드바·헤더는 brand red (#7a0c10 Deep Wine) + 흰 텍스트 */
  --page-bg:        #f5eeec;
  --surface:        #fdf9f8;
  --surface-low:    #f8f1ef;
  --surface-raised: #fdf9f8;
  --border:         #e0d3d0;
  --border-soft:    #ebdedb;
  --divider:        #ebdedb;

  /* Chrome (사이드바 + 헤더) — light theme: brand-saturated deep red
     Hierarchy 전략 (A+C+D):
     - 본문은 흰색, 보조는 warm cream → warm-cool 차이로 hierarchy 강화 (옵션 C)
     - Hover = 양각 (밝은 흰 overlay), Active = 음각 (어두운 overlay) → 인터랙션 구분 (옵션 D)
     - Active 좌측 악센트바 = 골드 → academic crimson + gold 클래식 조합 (옵션 A) */
  --surface-chrome: #7a0c10;                       /* Deep Wine — eye-fatigue 완화 (기존 #9a0e13 채도 ↓) */
  --text-on-chrome: #ffffff;                       /* chrome 위 본문/heading */
  --text-on-chrome-muted: rgba(255,235,210,.78);   /* warm cream — 보조 텍스트 */
  --text-on-chrome-dim:   rgba(255,235,210,.55);   /* warm cream — dim/icon */
  --chrome-hover:   rgba(255,255,255,.10);         /* hover = 양각 (밝아짐) */
  --chrome-active:  rgba(0,0,0,.30);               /* active = 음각 — 어두워진 chrome 에 맞춰 opacity 상향 */
  --chrome-border:  rgba(255,255,255,.15);
  --accent-gold:      #ffe8e6;                     /* light blush — Deep Wine chrome 위 부드러운 active 악센트 (active bar / badge) */
  --accent-gold-soft: rgba(255, 232, 230, .20);     /* light blush 톤 통일 soft tint */
  --badge-dot-text:   #ffffff;                      /* dark 배지 위 텍스트 → 흰색 가독성 */
  --chrome-frame:   transparent;               /* chrome 외곽 frame — 라이트는 hard border 제거, 아래 elevation shadow 로 대체 */
  --chrome-shadow-side:   4px 0 16px rgba(0,0,0,.18), 2px 0 4px rgba(0,0,0,.10); /* 사이드바 우측 elevation (강화: 깊이 + 근접 감 둘 다) */
  --chrome-shadow-bottom: 0 4px 16px rgba(0,0,0,.16), 0 2px 4px rgba(0,0,0,.08); /* 헤더 하단 elevation (강화) */
  --logo-panel-bg:  var(--surface-chrome);     /* 로고 영역 배경 — chrome 과 통일 (사용자 새 흰 로고 사용 예정) */

  --text-strong:    #111114;
  --text:           #374151;
  --text-muted:     #6b7280;
  --text-dim:       #9ca3af;
  --text-on-primary:#ffffff;

  --shadow-sm:   0 1px 2px rgba(17, 17, 20, .07);
  --shadow-md:   0 6px 16px rgba(17, 17, 20, .10);
  --shadow-card: 0 2px 6px rgba(17, 17, 20, .06), 0 1px 2px rgba(17, 17, 20, .04);

  /* Chart tokens — for future dashboard work (out of this handoff's scope) */
  --chart-grid:     #f3f4f6;
  --chart-axis:     #9ca3af;
  --chart-bar:      #B01116;
  --chart-bar-soft: rgba(176, 17, 22, .15);

  /* 데이터 시각화 — 12색 팔레트 (NT 대시보드 차트 공유, Chart.js 등) */
  --chart-c1:  #B01116;  /* brand red */
  --chart-c2:  #1e40af;  /* blue */
  --chart-c3:  #047857;  /* green */
  --chart-c4:  #92400e;  /* amber */
  --chart-c5:  #6d28d9;  /* purple */
  --chart-c6:  #0e7490;  /* teal */
  --chart-c7:  #be185d;  /* pink */
  --chart-c8:  #374151;  /* charcoal */
  --chart-c9:  #b45309;  /* orange */
  --chart-c10: #065f46;  /* deep green */
  --chart-c11: #1e3a5f;  /* navy */
  --chart-c12: #7f1d1d;  /* deep red */
  /* 차트 보조 (축 라벨·툴팁) */
  --chart-tick:        #6b7280;
  --chart-tooltip-bg:  #111114;
  --chart-tooltip-fg:  #ffffff;

  /* ── Legacy page-local token names — LIGHT defaults (Phase G follow-up) ──
     13개 페이지 (eval_v2/admin 등) :root 에서 `--xxx: var(--xxx)` 자기참조 패턴.
     기존엔 다크만 [data-theme="dark"] 에 매핑돼 있고 라이트 정의 누락 → 라이트
     모드에서 invalid fallback 으로 .tab-btn.active 흰 글자/.btn-bulk "새 세션"
     버튼 등이 transparent 화 되는 버그 발생 → 라이트 값도 명시적 정의 필요. */
  --on-surface:         #111114;
  --on-surface-variant: #52525b;
  --outline:            #71717a;
  --outline-variant:    #d4d4d8;
  --surface-lowest:     #ffffff;
  --surface-low-hover:  #ececed;
  --strong-bg:          #1c1c1f;
  --strong-bg-fg:       #ffffff;
}

/* html[data-theme] — specificity 0,1,1. 일부 페이지 (eval_v2/admin, form,
   sub_assignment 등) 가 자기 <style> 에 :root { --surface, --primary, ... }
   재정의하여 tokens.css 의 [data-theme="dark"] (0,1,0) 를 덮어쓰는 문제 대응.
   html[...] 는 specificity 한 단계 높아 페이지의 :root (0,1,0) 를 이김. */
html[data-theme="dark"] {
  color-scheme: dark;
  /* 3-tier: chrome (slate blue, 가장 어두움) < page-bg (중성, lifted) < surface (카드) */
  --page-bg:        #1a1e28;
  --surface:        #23283a;
  --surface-low:    #1e2230;
  --surface-raised: #2a2f44;
  --surface-chrome: #13182a;   /* 사이드바 + 헤더 전용 (slate blue, navy 빛) */
  --border:         #2f3548;
  --border-soft:    #252a3b;
  --divider:        #252a3b;

  /* Chrome 위 텍스트·overlay — 다크에서는 기존 본문 토큰 그대로 사용 */
  --text-on-chrome:       var(--text-strong);
  --text-on-chrome-muted: var(--text-muted);
  --text-on-chrome-dim:   var(--text-dim);
  --chrome-hover:         var(--surface-low);
  --chrome-active:        var(--surface-raised);
  --chrome-border:        var(--border-soft);
  --chrome-frame:         var(--primary);    /* 다크는 brand red frame 유지 (사용자 만족 상태) */
  --chrome-shadow-side:   none;              /* 다크는 hard border 사용, shadow 불필요 */
  --chrome-shadow-bottom: none;
  --logo-panel-bg:        transparent;       /* 다크는 chrome 그대로 (흰 로고 표시) */
  --accent-gold:          #ffffff;           /* 다크는 흰색 accent 그대로 유지 */
  --accent-gold-soft:     var(--chrome-active);
  --badge-dot-text:       var(--surface-chrome); /* 다크는 흰 dot + chrome (slate blue) 색 텍스트 */

  --text-strong:    #f9fafb;
  --text:           #e5e7eb;
  --text-muted:     #9ca3af;
  --text-dim:       #6b7280;

  --primary-container: rgba(176, 17, 22, .22);
  --primary-soft:      rgba(176, 17, 22, .12);

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md:   0 4px 14px rgba(0, 0, 0, .45);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .3);

  --chart-grid:     #1f232c;
  --chart-axis:     #6b7280;
  --chart-bar:      #B01116;
  --chart-bar-soft: rgba(176, 17, 22, .28);

  /* 데이터 시각화 — 12색 팔레트 다크 매핑 (hue 유지, lightness ↑ 25%) */
  --chart-c1:  #dc2630;  /* brand red */
  --chart-c2:  #60a5fa;  /* blue */
  --chart-c3:  #34d399;  /* green */
  --chart-c4:  #fbbf24;  /* amber */
  --chart-c5:  #a78bfa;  /* purple */
  --chart-c6:  #22d3ee;  /* teal */
  --chart-c7:  #f472b6;  /* pink */
  --chart-c8:  #9ca3af;  /* charcoal → gray (다크 표면 위 가독) */
  --chart-c9:  #fb923c;  /* orange */
  --chart-c10: #6ee7b7;  /* deep green → mint */
  --chart-c11: #93c5fd;  /* navy → light blue */
  --chart-c12: #fca5a5;  /* deep red → soft red */
  --chart-tick:        #9ca3af;
  --chart-tooltip-bg:  #1f2937;
  --chart-tooltip-fg:  #f9fafb;

  /* ── Legacy page-local token names (Phase C.5) ──────────────────────────
     아래 변수들은 tokens.css 에 없고 13개 페이지의 :root 에서만 정의됨
     (eval_v2/admin, form, sub_assignment, status, analysis, annual_eval,
      campus_status, public_form, users, logs, announcements/detail 등).
     페이지 :root (0,1,0) 가 라이트 값으로 고정하므로 다크 모드에서
     배경은 어두워지지만 텍스트가 검은색 그대로 → 불가시 현상 발생.
     html[data-theme="dark"] (0,1,1) 로 override 해 다크 모드에서
     읽기 가능하도록 매핑 제공. 페이지 코드는 건드리지 않음.

     향후 각 페이지를 tokens.css 표준 naming (--text, --text-muted 등) 로
     migration 하면 아래 블록은 제거 가능 (Phase G 별도 세션). */
  --on-surface:         #f9fafb;   /* page.light: #111114 (검은 텍스트) */
  --on-surface-variant: #9ca3af;   /* page.light: #52525b (흐린 검은) */
  --outline:            #4a5060;   /* page.light: #71717a (중간 회색) */
  --outline-variant:    #2f3548;   /* page.light: #d4d4d8 (연한 divider) */
  --surface-lowest:     #10131e;   /* page.light: #ffffff (가장 어두운 표면) */

  /* eval_v2/admin Phase G — 페이지가 신규 추가한 토큰들의 다크 매핑 */
  --surface-low-hover:  #232838;   /* page.light: #ececed */
  --strong-bg:          #2a2f3f;   /* page.light: #1c1c1f (거의-검정 active) → 다크에선 카드 위 한 단계 위 표면 */
  --strong-bg-fg:       var(--text-strong);
}