/* =========================================================
 * Theme tokens — single source of truth.
 *   :root             → 다크 테마 (기본)
 *   [data-theme=light] → 라이트 테마
 * legacy style.css (SCSS 컴파일 산출물) 와 SPA tokens 가 함께 참조한다.
 * ========================================================= */
:root {
  /* Surface (dark) */
  --color-bg:           #10141B;  /* page bg */
  --color-bg-elev:      #13141D;  /* card / row */
  --color-surface:      #18202E;  /* panel */
  --color-surface-2:    #273149;  /* hovered / nested panel */
  --color-border:       #2F3A79;
  --color-border-soft:  #3F5285;

  /* Text */
  --color-text:         #FFFFFF;
  --color-text-muted:   #A1BBFF;
  --color-text-faint:   #686F80;
  --color-text-on-light:#13141D;

  /* Brand */
  --color-primary:      #3870FF;
  --color-primary-soft: #C7D7FF;
  --color-primary-700:  #2A3D6D;
  --color-primary-disabled: rgba(56, 112, 255, 0.5);
  --color-secondary:    #C7D7FF;

  /* RGB 채널 토큰 (rgba 합성용)
   * 다크 카드 위 흰색 반투명 → 라이트 카드 위 어두운 반투명 자동 전환. */
  --rgb-on-surface:    255, 255, 255;

  /* Status (테마 무관 공통) */
  --color-danger:       #F04953;
  --color-critical:     #FF1B71;
  --color-warning:      #FF822F;
  --color-caution:      #FFDE67;
  --color-success:      #00D697;
  --color-info:         #0091FF;

  /* Banner surfaces (info/danger) */
  --color-info-bg:      rgba(0, 145, 255, 0.10);
  --color-info-border:  rgba(0, 145, 255, 0.35);
  --color-danger-bg:    rgba(240, 73, 83, 0.12);
  --color-danger-border:rgba(240, 73, 83, 0.45);

  /* Badge */
  --color-badge-muted-bg: #2A2F3C;

  /* legacy SCSS 변수 매핑 (다크) */
  --color-white:        #FFFFFF;
  --color-black-10:     #10141B;
  --color-black-13:     #13141D;
  --color-black-1:      #111111;
  --color-black-2:      #222222;
  --color-black-3:      #333333;
  --color-black-4:      #444444;
  --color-black-6:      #666666;
  --color-black-9:      #999999;
  --color-gray-c4:      #C4C4C4;
  --color-gray-e3:      #E3E4E7;
  --color-gray-b:       #BBBBBB;
  --color-gray-b0:      #B0B3B4;
  --color-gray-c:       #CCCCCC;
  --color-gray-97:      #979797;
  --color-bg-1a:        #1A455C;
  --color-bg-17:        #171D33;
  --color-bg-18:        #18202E;
  --color-bg-27:        #273149;
  --color-bg-2a:        #2A3D6D;
  --color-bg-2b:        #2B355A;
  --color-bg-2f:        #2F3A79;
  --color-bg-3f:        #3F5285;
  --color-bg-3e:        #3E4B6B;
  --color-bg-43:        #435478;
  --color-bg-49:        #4976AB;
  --color-bg-6f:        #6F87AA;
  --color-bg-d3:        #D3DAF1;
  --color-bg-d9:        #D9D9D9;
  --color-bg-e8:        #E8E8E9;
  --color-bg-eb:        #EBEFF0;
  --color-bg-e84:       #E8F4FF;
  --color-bg-ec:        #ECF1FF;
  --color-bg-f5:        #F5F7F9;
  --color-bg-a1:        #A1BBFF;
  --color-bg-d0:        #D0D7DD;

  /* Radius / Shadow / Spacing scale */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow:    0 4px 12px rgba(0,0,0,.45);

  /* Typography */
  --font-sans: "SpoqaHanSansNeo", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
}

[data-theme="light"] {
  /* RGB 채널 토큰 — 라이트에서는 어두운 본문 톤 */
  --rgb-on-surface:    19, 20, 29;

  /* Surface (light) — 다크의 명도 위계를 반전:
   *   다크: 페이지 어두움(#10141B) ↔ 카드 밝음(#18202E)
   *   라이트: 페이지 밝음(#F4F6FA) ↔ 카드 살짝 어두움(#ECEFF3)
   * 그림자 없이 톤 차이만으로 구분. */
  --color-bg:           #F4F6FA;  /* 페이지 / wrap / header — 더 밝은 톤 */
  --color-bg-elev:      #ECEFF3;  /* 카드 — 살짝 어두운 톤 */
  --color-surface:      #ECEFF3;  /* 패널 */
  --color-surface-2:    #DFE4EC;  /* hover/nested */
  --color-border:       #C8CFD8;
  --color-border-soft:  #DCE0E6;

  /* Text — 다크 모드의 흰 본문 → 라이트에서는 어두운 본문 */
  --color-text:         #13141D;
  --color-text-muted:   #4976AB;
  --color-text-faint:   #6F87AA;
  --color-text-on-light:#13141D;

  /* Brand (그대로) */
  --color-primary:      #3870FF;
  --color-primary-soft: #2A3D6D;
  --color-primary-700:  #2A3D6D;
  --color-primary-disabled: rgba(56, 112, 255, 0.5);
  --color-secondary:    #2A3D6D;  /* 라이트에서 select 등 텍스트가 어두워야 보임 */

  /* legacy SCSS 변수 매핑 (라이트) */
  --color-white:        #13141D;  /* 의미: 다크 본문 흰색 → 라이트 본문 어두운 색 */
  --color-black-10:     #F4F6FA;  /* page bg — 더 밝은 톤 */
  --color-black-13:     #ECEFF3;  /* card — 살짝 어두운 톤 */
  --color-black-1:      #111111;
  --color-black-2:      #222222;
  --color-black-3:      #333333;
  --color-black-4:      #444444;
  --color-black-6:      #666666;
  --color-black-9:      #999999;
  --color-gray-c4:      #C4C4C4;
  --color-gray-e3:      #E3E4E7;
  --color-gray-b:       #BBBBBB;
  --color-gray-b0:      #B0B3B4;
  --color-gray-c:       #CCCCCC;
  --color-gray-97:      #979797;
  --color-bg-1a:        #E8F4FF;  /* 청록 다크 → 청록 라이트 */
  --color-bg-17:        #ECEFF3;  /* 카드 — 살짝 어두운 톤 */
  --color-bg-18:        #ECEFF3;  /* 패널 — 살짝 어두운 톤 */
  --color-bg-27:        #DFE4EC;  /* hover/nested */
  --color-bg-2a:        #C7D7FF;  /* primary-700 → 옅은 primary */
  --color-bg-2b:        #E0E6F2;
  --color-bg-2f:        #D0D7DD;  /* 다크 보더 → 라이트 보더 */
  --color-bg-3f:        #B0B3B4;  /* 보더 soft */
  --color-bg-3e:        #C4C4C4;
  --color-bg-43:        #B0B3B4;
  --color-bg-49:        #4976AB;  /* 텍스트 강조용 — 그대로 유지 */
  --color-bg-6f:        #6F87AA;
  --color-bg-d3:        #D3DAF1;
  --color-bg-d9:        #D9D9D9;
  --color-bg-e8:        #E8E8E9;
  --color-bg-eb:        #EBEFF0;
  --color-bg-e84:       #E8F4FF;
  --color-bg-ec:        #ECF1FF;
  --color-bg-f5:        #F5F7F9;
  --color-bg-a1:        #4976AB;  /* 다크에서 muted text → 라이트에서 어두운 muted */
  --color-bg-d0:        #D0D7DD;

  /* Shadow — 라이트에서는 약하게 */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow:    0 4px 12px rgba(16, 20, 27, .08);

  --color-badge-muted-bg: #E0E6F2;
}