/* 색 토큰 — 모든 페이지가 가장 먼저 불러온다. 다른 CSS는 색을 직접 쓰지 말고 이 변수만 쓴다.
   기본(다크)은 지금까지의 어두운 톤 그대로, 시스템이 라이트 모드면 아래 @media에서 값만 바꾼다.
   액센트: 시스템(윈도우) 강조색 AccentColor를 쓰고, 지원하지 않는 브라우저는 기존 보라색.
   3D 화면 안(컷 그림, 편집기 뷰포트 장면)과 웹툰 지면(흰 바탕·검은 컷 테두리·말풍선)은 테마와 무관하다. */

:root {
  color-scheme: light dark; /* 스크롤바·입력칸 등 브라우저 기본 컨트롤도 테마를 따라가게 */

  --accent: #4a3f9e;
  --accent-text: #fff;
  --accent-hover: var(--accent);

  --bg-page: #15151f;      /* 로그인/선택/새 이야기 화면 바탕 */
  --bg-sidebar: #1e1e2e;
  --bg-panel: #1e1e1e;     /* 트리·채팅·편집기 패널 */
  --bg-canvas: #111;       /* 컷 컬럼 뒤 / 편집기 뷰포트 뒤 */
  --bg-item: #2a2a2a;      /* 목록 항목·버튼 */
  --bg-row: #202020;       /* 편집기 본 슬라이더 줄 */
  --bg-hover: #3a3a3a;
  --bg-sidebar-hover: #33334d;
  --bg-input: #222;
  --bg-overlay: #1e1e1ef0; /* 토스트·안내 라벨 */
  --bg-code: #101010;

  --border: #444;
  --border-soft: #2e2e2e;

  --text: #eee;
  --text-muted: #aaa;
  --text-dim: #777;
  --text-code: #b9d9b9;
  --link: #6f9fd8;

  --ok: #7fd;              /* 성공 상태 문구·AI 채팅 */
  --error: #f88;
  --danger-bg: #6b2b2b;
  --danger-border: #7d3333;
  --danger-text: #f0c7c7;
  --danger-hover: #d9534f;
  --toast-border: #4ade80;

  --slider-track: #333;
  --slider-thumb: #bbb;
  --rom-band: #2f4a63;
  --sign-neg-bg: #4a3a63;
  --sign-neg-text: #d9c7ff;
  --verified-bg: #2b5c3a;
  --verified-text: #9fe8b5;
  --verified-border: #37764a;
  --clipped: #ffb454;
  --clipped-border: #7a5a2a;
}

/* 크롬 계열은 AccentColor에 OS 강조색이 아닌 고정 파랑을 돌려준다(확인됨). OS 색을 실제로 주는 파이어폭스만 적용. */
@supports (color: AccentColor) and (-moz-appearance: none) {
  :root {
    --accent: AccentColor;
    --accent-text: AccentColorText;
  }
}

@supports (background: color-mix(in srgb, red 50%, blue)) {
  :root {
    --accent-hover: color-mix(in srgb, var(--accent) 82%, white);
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-page: #f4f4f7;
    --bg-sidebar: #e8e8ef;
    --bg-panel: #f0f0f3;
    --bg-canvas: #d9d9de;
    --bg-item: #ffffff;
    --bg-row: #ffffff;
    --bg-hover: #e1e1e8;
    --bg-sidebar-hover: #d8d8e4;
    --bg-input: #ffffff;
    --bg-overlay: #fffffff0;
    --bg-code: #f7f7f2;

    --border: #c4c4cc;
    --border-soft: #dcdce2;

    --text: #1d1d22;
    --text-muted: #55555e;
    --text-dim: #8a8a94;
    --text-code: #2f6b2f;
    --link: #2a6db5;

    --ok: #0b7a66;
    --error: #c0392b;
    --danger-bg: #f7d9d9;
    --danger-border: #e3a9a9;
    --danger-text: #8a1f1f;
    --danger-hover: #d9534f;
    --toast-border: #22a356;

    --slider-track: #cfcfd6;
    --slider-thumb: #6a6a74;
    --rom-band: #b7d0ea;
    --sign-neg-bg: #e4dcf5;
    --sign-neg-text: #4b2f86;
    --verified-bg: #d6efdd;
    --verified-text: #1f6b37;
    --verified-border: #9fd3ae;
    --clipped: #b86a00;
    --clipped-border: #e0b77a;
  }
}