/* 테마 팔레트.
 *
 * styles.css 의 :root 가 B안(console) 라이트를 기본으로 싣는다. 이 파일은 그 위에
 * 나머지 조합만 덮어쓴다. 재정의하는 것은 순수한 색 토큰뿐이고 간격·크기·컨트롤
 * 기하는 건드리지 않는다. 그래서 테마를 바꿔도 레이아웃은 움직이지 않는다.
 *
 * 값의 출처는 docs/design/brand-color-directions.md 이며, 6개 조합 전부
 * test/design-tokens-contrast.test.js 가 실제 이 파일을 읽어 WCAG 대비를 검사한다.
 *
 * 선택 규칙:
 *   html[data-theme="paper|console|slate"]  브랜드 안
 *   html[data-mode="light|dark"]            명시 선택
 *   data-mode 가 없으면 prefers-color-scheme 를 따른다.
 *
 * 주의: 다크에서 --soft-orange 는 어두운 강조 배경이라 그 위에 올라가는 글자는
 * 반드시 --ink 계열이어야 한다. --on-accent 는 accent 배경 전용이다.
 */

/* ===== paper ===== */
html[data-theme="paper"],
html[data-theme="paper"][data-mode="light"] {
  --paper: #F4F1EA;
  --surface: #FBF9F4;
  --surface-strong: #FFFFFF;
  --ink: #1A1714;
  --muted: #5C554C;
  --line: #DED8CC;
  --line-control: #8A8274;
  --row-hover: #EFEAE0;
  --orange: #9A3D0B;
  --orange-dark: #7A2F08;
  --soft-orange: #F6E7DA;
  --on-accent: #FFFFFF;
  --border-hover: #5C554C;
  --state-success: #1F6B3F;
  --state-warning: #8A5A00;
  --state-danger: #A4262C;
  --state-info: #1F5A8F;
  --state-error-border: #A4262C;
  --state-error-surface: #F6E7DA;
  --state-error-text: #A4262C;
  color-scheme: light;
}

html[data-theme="paper"][data-mode="dark"] {
  --paper: #14120E;
  --surface: #1C1A15;
  --surface-strong: #24211B;
  --ink: #F2EDE4;
  --muted: #AEA595;
  --line: #332F27;
  --line-control: #6E675B;
  --row-hover: #232019;
  --orange: #F08A3C;
  --orange-dark: #FFAE6B;
  --soft-orange: #3A2415;
  --on-accent: #14120E;
  --border-hover: #AEA595;
  --state-success: #5FD08A;
  --state-warning: #E8B45C;
  --state-danger: #F27A72;
  --state-info: #7FB6F0;
  --state-error-border: #F27A72;
  --state-error-surface: #3A2415;
  --state-error-text: #F27A72;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="paper"]:not([data-mode]) {
    --paper: #14120E;
    --surface: #1C1A15;
    --surface-strong: #24211B;
    --ink: #F2EDE4;
    --muted: #AEA595;
    --line: #332F27;
    --line-control: #6E675B;
    --row-hover: #232019;
    --orange: #F08A3C;
    --orange-dark: #FFAE6B;
    --soft-orange: #3A2415;
    --on-accent: #14120E;
    --border-hover: #AEA595;
    --state-success: #5FD08A;
    --state-warning: #E8B45C;
    --state-danger: #F27A72;
    --state-info: #7FB6F0;
    --state-error-border: #F27A72;
    --state-error-surface: #3A2415;
    --state-error-text: #F27A72;
    color-scheme: dark;
  }
}

/* ===== console ===== */
/* 문서의 B안은 raised 를 "#FFFFFF + shadow" 로 두었지만, 그러면 surface 와
   raised 가 같은 색이라 그림자가 꺼지는 환경(고대비 모드, 인쇄, forced-colors)에서
   오버레이 경계가 사라진다. 표면 3단 구조를 색으로도 유지하기 위해 surface 를 한
   단계 낮춘다. ink 17.99→17.40 으로 본문 대비는 그대로 AA 를 크게 넘는다. */
html[data-theme="console"],
html[data-theme="console"][data-mode="light"] {
  --paper: #F4F5F7;
  --surface: #FAFBFC;
  --surface-strong: #FFFFFF;
  --ink: #14171A;
  --muted: #5B636D;
  --line: #E2E5E9;
  --line-control: #7F868F;
  --row-hover: #EEF0F3;
  --orange: #2A5BD7;
  --orange-dark: #1E43A8;
  --soft-orange: #E8EEFC;
  --on-accent: #FFFFFF;
  --border-hover: #5B636D;
  --state-success: #0F7A43;
  --state-warning: #8A5A00;
  --state-danger: #B42318;
  --state-info: #175CD3;
  --state-error-border: #B42318;
  --state-error-surface: #E8EEFC;
  --state-error-text: #B42318;
  color-scheme: light;
}

html[data-theme="console"][data-mode="dark"] {
  --paper: #0E1013;
  --surface: #16191D;
  --surface-strong: #1E2228;
  --ink: #EDEFF2;
  --muted: #9BA3AE;
  --line: #272C33;
  --line-control: #666E78;
  --row-hover: #1C2026;
  --orange: #6E9BFF;
  --orange-dark: #9CBBFF;
  --soft-orange: #17233C;
  --on-accent: #0E1013;
  --border-hover: #9BA3AE;
  --state-success: #4ED08A;
  --state-warning: #E3B25C;
  --state-danger: #F47C6F;
  --state-info: #6FB2F5;
  --state-error-border: #F47C6F;
  --state-error-surface: #17233C;
  --state-error-text: #F47C6F;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="console"]:not([data-mode]) {
    --paper: #0E1013;
    --surface: #16191D;
    --surface-strong: #1E2228;
    --ink: #EDEFF2;
    --muted: #9BA3AE;
    --line: #272C33;
    --line-control: #666E78;
    --row-hover: #1C2026;
    --orange: #6E9BFF;
    --orange-dark: #9CBBFF;
    --soft-orange: #17233C;
    --on-accent: #0E1013;
    --border-hover: #9BA3AE;
    --state-success: #4ED08A;
    --state-warning: #E3B25C;
    --state-danger: #F47C6F;
    --state-info: #6FB2F5;
    --state-error-border: #F47C6F;
    --state-error-surface: #17233C;
    --state-error-text: #F47C6F;
    color-scheme: dark;
  }
}

/* ===== slate ===== */
html[data-theme="slate"],
html[data-theme="slate"][data-mode="light"] {
  --paper: #EEF1F4;
  --surface: #F9FAFB;
  --surface-strong: #FFFFFF;
  --ink: #0E1A24;
  --muted: #4F6070;
  --line: #D3DBE2;
  --line-control: #748393;
  --row-hover: #E7ECF0;
  --orange: #0B6B63;
  --orange-dark: #084F49;
  --soft-orange: #DDEFEC;
  --on-accent: #FFFFFF;
  --border-hover: #4F6070;
  --state-success: #0A6C3D;
  --state-warning: #8A5300;
  --state-danger: #B3261E;
  --state-info: #0B5C9E;
  --state-error-border: #B3261E;
  --state-error-surface: #DDEFEC;
  --state-error-text: #B3261E;
  color-scheme: light;
}

html[data-theme="slate"][data-mode="dark"] {
  --paper: #0B1218;
  --surface: #121B23;
  --surface-strong: #18242E;
  --ink: #E8EFF4;
  --muted: #94A6B4;
  --line: #202C36;
  --line-control: #63737F;
  --row-hover: #18222B;
  --orange: #3FC8B4;
  --orange-dark: #7EE0D1;
  --soft-orange: #0E2E2C;
  --on-accent: #06100F;
  --border-hover: #94A6B4;
  --state-success: #4FD08E;
  --state-warning: #E4B45E;
  --state-danger: #F3796F;
  --state-info: #69B4F2;
  --state-error-border: #F3796F;
  --state-error-surface: #0E2E2C;
  --state-error-text: #F3796F;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="slate"]:not([data-mode]) {
    --paper: #0B1218;
    --surface: #121B23;
    --surface-strong: #18242E;
    --ink: #E8EFF4;
    --muted: #94A6B4;
    --line: #202C36;
    --line-control: #63737F;
    --row-hover: #18222B;
    --orange: #3FC8B4;
    --orange-dark: #7EE0D1;
    --soft-orange: #0E2E2C;
    --on-accent: #06100F;
    --border-hover: #94A6B4;
    --state-success: #4FD08E;
    --state-warning: #E4B45E;
    --state-danger: #F3796F;
    --state-info: #69B4F2;
    --state-error-border: #F3796F;
    --state-error-surface: #0E2E2C;
    --state-error-text: #F3796F;
    color-scheme: dark;
  }
}

/* Shared dark-surface repairs. Page-specific styles consume these tokens instead
   of painting light-only cards, hover fills, and skeleton highlights. */
html[data-mode="dark"] {
  --admin-surface: var(--surface);
  --chip-hover-surface: var(--soft-orange);
  --skeleton-highlight: rgb(255 255 255 / .08);
  --chart-series-0: var(--state-success);
  --chart-series-1: var(--orange);
  --chart-series-2: var(--state-info);
}

@media (prefers-color-scheme: dark) {
  html:not([data-mode]) {
    --admin-surface: var(--surface);
    --chip-hover-surface: var(--soft-orange);
    --skeleton-highlight: rgb(255 255 255 / .08);
    --chart-series-0: var(--state-success);
    --chart-series-1: var(--orange);
    --chart-series-2: var(--state-info);
  }
}

/* data-theme 이 아직 적용되기 전(첫 페인트)에도 시스템 다크를 따른다. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]):not([data-mode]) {
    --paper: #14120E;
    --surface: #1C1A15;
    --surface-strong: #24211B;
    --ink: #F2EDE4;
    --muted: #AEA595;
    --line: #332F27;
    --line-control: #6E675B;
    --row-hover: #232019;
    --orange: #F08A3C;
    --orange-dark: #FFAE6B;
    --soft-orange: #3A2415;
    --on-accent: #14120E;
    --border-hover: #AEA595;
    --state-success: #5FD08A;
    --state-warning: #E8B45C;
    --state-danger: #F27A72;
    --state-info: #7FB6F0;
    --state-error-border: #F27A72;
    --state-error-surface: #3A2415;
    --state-error-text: #F27A72;
    color-scheme: dark;
  }
}