/* 디자인 토큰 (B5 v1 — 2026-08-11 전면 개정)
 *
 * 이 파일 하나가 웹사이트 · 실습 앱 · SVG 도해의 색과 선을 함께 정한다.
 * (EPUB 은 build/lib/epub.mjs 안의 자체 CSS 를 쓴다 — 종이 규칙은 그쪽이다.)
 *
 * ── 왜 바꿨나 ────────────────────────────────────────────────
 * v0 은 "완전 플랫 · 중성색 · 종이 느낌"이었다. 책의 도해에는 맞았지만
 * **아이가 만지는 화면에까지 같은 토큰을 썼던 것이 잘못**이었다.
 * 집필자 검수(2026-08-11): "학습 효율이 다소 떨어지더라도 어린 아이들에게
 * 주목도를 높이고 어필이 가능하도록." 그래서 웹은 밤하늘 무대로 간다.
 *
 * 원칙
 *  - 바탕은 깊은 남색, 글자는 밝게. 대비는 오히려 종이보다 높다
 *  - 강조는 **빛**으로 한다 — 그림자가 아니라 번짐(glow)
 *  - 색 다섯 개를 돌려 쓴다. 여섯 번째 색이 필요하면 디자인이 틀린 것이다
 *
 * 의미 규칙 (절대 뒤집지 않는다)
 *  - 옛날(과거) = 호박색 계열  /  지금(현재) = 파랑·청록 계열
 *    12개 대비 실습에서 반복된다.
 */

:root {
  color-scheme: dark;

  /* ── 무대와 글자 ─────────────────────────────── */
  --bg:          #0a0c18;   /* 페이지 바닥 */
  --bg-deep:     #06070f;   /* 더 안쪽 (실습 무대) */
  --surface:     #141833;   /* 판·카드 */
  --surface-2:   #1c2145;   /* 판 위의 판 */
  --line:        #2a3060;   /* 구분선 */
  --line-soft:   #1e2342;

  --ink:        #edf0ff;   /* 본문 */
  --ink-soft:   #a7aed6;   /* 보조 설명 */
  --ink-faint:  #6c74a6;   /* 캡션 · 비활성 */

  /* 종이 이름 유지 — 도해 SVG 와 실습이 이 이름을 쓴다.
     이름을 바꾸면 33개 실습을 전부 손봐야 한다. 값만 갈아 끼운다. */
  --paper:      var(--surface);
  --paper-sunk: var(--bg-deep);
  --rule:       var(--line);

  /* ── 색 다섯 ────────────────────────────────── */
  --c-amber:  #ffa53d;
  --c-pink:   #ff4d8d;
  --c-violet: #9d5cff;
  --c-cyan:   #2ee6d6;
  --c-blue:   #4d9bff;

  /* ── 의미색 ─────────────────────────────────── */
  --now:        var(--c-cyan);   /* 지금 방식 · 주 강조 */
  --now-soft:   #10373a;
  --past:       var(--c-amber);  /* 옛날 AI · 역사 */
  --past-soft:  #33240d;
  --alert:      #ff5f7a;         /* 틀림 · 주의 */
  --alert-soft: #3a1420;
  --link:       var(--c-blue);

  /* ── 빛 ─────────────────────────────────────── */
  --grad: linear-gradient(100deg, var(--c-amber), var(--c-pink) 46%, var(--c-violet));
  --grad-cool: linear-gradient(100deg, var(--c-cyan), var(--c-blue) 60%, var(--c-violet));
  --glow-now:  0 0 24px rgba(46, 230, 214, .35);
  --glow-hot:  0 0 28px rgba(255, 77, 141, .38);
  --lift:      0 18px 40px rgba(0, 0, 0, .45);

  /* ── 도해 채움색 (6색) ─────────────────────── */
  --fig-1: #5f8ad6;
  --fig-2: #d9a24e;
  --fig-3: #5fae86;
  --fig-4: #cf7f78;
  --fig-5: #9a86d6;
  --fig-6: #737a99;

  /* ── 선 규격 ───────────────────────────────── */
  --stroke:      2.5px;
  --stroke-fine: 1.5px;
  --radius:      18px;
  --radius-sm:   10px;
  --radius-pill: 999px;

  /* ── 간격 (4의 배수) ────────────────────────── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;

  /* ── 서체 ──────────────────────────────────────
   * 웹폰트를 불러오지 않는다. 네트워크 요청 0 이 이 책의 제약이고,
   * 폰트 CDN 은 지난 책을 죽인 바로 그 종류의 의존이다.
   * 대신 기기에 있으면 좋은 것부터 차례로 고른다. */
  --font: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo",
          "Noto Sans KR", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --measure: 38em;
}

/* 종이 테마 — 밝은 데서 읽고 싶은 사람과 인쇄용.
   실습 무대는 이 테마에서도 어둡게 남는다 (아래 site.css 의 --stage-*). */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff; --bg-deep: #f2f3f8;
  --surface: #ffffff; --surface-2: #f4f5fa;
  --line: #dcdee8; --line-soft: #ebecf3;
  --ink: #14161f; --ink-soft: #4d5266; --ink-faint: #858aa3;
  --now: #0e9e90; --now-soft: #d9f5f1;
  --past: #a9711a; --past-soft: #f8eeda;
  --alert: #cf3a52; --alert-soft: #fbe3e7;
  --link: #2563eb;
  --fig-1: #7fa8d8; --fig-2: #e0b25e; --fig-3: #86ac8f;
  --fig-4: #c98f86; --fig-5: #a99cc4; --fig-6: #b9bec7;
  --lift: 0 12px 30px rgba(20, 22, 31, .10);
}

/* 움직임을 줄이도록 설정한 사용자 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}