/* v2 디자인 토큰 — 어두운 작전 콘솔을 기본으로 두고 밝은 테마를 함께 정의한다.
   색은 모든 컴포넌트에서 토큰으로만 참조한다. 31종 시너지 색은 데이터에서 오므로
   화면 크롬은 중립을 유지해 타입 색이 가장 선명하게 읽히도록 한다. */

:root {
  color-scheme: dark;

  /* 바탕과 면 */
  --ground: #080d12;
  --ground-grid: #0e161d;
  --surface: #111a21;
  --surface-2: #17222b;
  --surface-3: #1e2c36;
  --surface-hover: #22323d;
  --line: #273a47;
  --line-soft: #1a2631;
  --line-strong: #3b5365;

  /* 글자 */
  --ink: #e7eff4;
  --ink-muted: #93a7b4;
  --ink-faint: #637684;
  --ink-inverse: #08121a;

  /* 신호색 — --accent 는 현재 챕터 테마가 런타임에 덮어쓴다 (docs/design/v3 팔레트) */
  --accent: #b9e781;
  --accent-ink: #17211c;
  --accent-soft: color-mix(in srgb, var(--accent) 30%, transparent);
  --panel-tint: #182222;
  --field-ground: #54794e;
  --field-path: #c3b58c;
  --signal: #4ae0c4; /* 준비 완료·마나·확인 */
  --signal-dim: #1d6b61;
  --danger: #e8485a; /* 라운드·라이프·누수 */
  --danger-dim: #5d1f28;
  --gold: #f0c34f;
  --boss: #a978ff;
  --warn: #f08c3a;

  /* 전장 */
  --field: #0b1319;
  --field-line: #16222b;
  --path: #1c2b36;
  --path-edge: #2b4150;
  --slot: #15202a;
  --slot-edge: #2a3c49;
  --slot-empty-edge: #223240;
  --enemy: #cf4d5e;
  --enemy-boss: #b983ff;

  /* 입체감 — 역할이 있는 곳에만 쓴다 */
  --shadow-panel:
    0 1px 0 rgb(255 255 255 / 4%) inset, 0 8px 24px -16px rgb(0 0 0 / 80%);
  --shadow-pop: 0 18px 48px -24px rgb(0 0 0 / 90%);
  --ring: 0 0 0 1px var(--line);

  /* 글꼴 */
  /* 로컬 한글 픽셀 글꼴: 외부 네트워크 없이 UI와 숫자에 공통 적용. */
  --font-ui:
    "NeoDunggeunmo", system-ui, -apple-system, "Apple SD Gothic Neo",
    "Malgun Gothic", sans-serif;
  --font-mono:
    "NeoDunggeunmo", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* 타입 스케일 */
  --t-eyebrow: 0.6875rem;
  --t-micro: 0.75rem;
  --t-small: 0.8125rem;
  --t-body: 0.875rem;
  --t-lead: 1rem;
  --t-title: 1.25rem;
  --t-display: 1.75rem;
  --t-round: 1.45rem;

  /* 간격 */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  --r1: 3px;
  --r2: 6px;
  --r3: 10px;
  --r4: 16px;

  --dur: 140ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* 레이아웃 */
  --topbar-h: 56px;
  --rail-w: 300px;
  --detail-w: 356px;
  --dock-h: 216px;
}

:root[data-theme="light"] {
  color-scheme: light;

  --ground: #e9eef1;
  --ground-grid: #dfe7eb;
  --surface: #ffffff;
  --surface-2: #f3f7f9;
  --surface-3: #e9f0f4;
  --surface-hover: #dde8ee;
  --line: #cedae1;
  --line-soft: #e2eaef;
  --line-strong: #a9bcc8;

  --ink: #0d1920;
  --ink-muted: #4d6472;
  --ink-faint: #7c929f;
  --ink-inverse: #ffffff;

  --signal: #0f9c88;
  --signal-dim: #a8e6dc;
  --danger: #cf2438;
  --danger-dim: #f6ccd2;
  --gold: #a9741a;
  --boss: #6f3fd1;
  --warn: #b4610e;

  --field: #e6edf1;
  --field-line: #d2dde4;
  --path: #c6d4de;
  --path-edge: #94a9b8;
  --slot: #ffffff;
  --slot-edge: #c3d3dd;
  --slot-empty-edge: #d7e2e8;
  --enemy: #c32f44;
  --enemy-boss: #6f3fd1;

  --shadow-panel:
    0 1px 2px rgb(16 36 48 / 6%), 0 8px 20px -18px rgb(16 36 48 / 40%);
  --shadow-pop: 0 20px 44px -28px rgb(16 36 48 / 45%);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --ground: #e9eef1;
    --ground-grid: #dfe7eb;
    --surface: #ffffff;
    --surface-2: #f3f7f9;
    --surface-3: #e9f0f4;
    --surface-hover: #dde8ee;
    --line: #cedae1;
    --line-soft: #e2eaef;
    --line-strong: #a9bcc8;

    --ink: #0d1920;
    --ink-muted: #4d6472;
    --ink-faint: #7c929f;
    --ink-inverse: #ffffff;

    --signal: #0f9c88;
    --signal-dim: #a8e6dc;
    --danger: #cf2438;
    --danger-dim: #f6ccd2;
    --gold: #a9741a;
    --boss: #6f3fd1;
    --warn: #b4610e;

    --field: #e6edf1;
    --field-line: #d2dde4;
    --path: #c6d4de;
    --path-edge: #94a9b8;
    --slot: #ffffff;
    --slot-edge: #c3d3dd;
    --slot-empty-edge: #d7e2e8;
    --enemy: #c32f44;
    --enemy-boss: #6f3fd1;

    --shadow-panel:
      0 1px 2px rgb(16 36 48 / 6%), 0 8px 20px -18px rgb(16 36 48 / 40%);
    --shadow-pop: 0 20px 44px -28px rgb(16 36 48 / 45%);
  }
}