/* ============================================================
   tokens.css — design tokens (single source of truth)
   ============================================================ */

:root {
  /* ---- Base surfaces ---- */
  --bg:        #fdf7f5;
  --surface:   #ffffff;
  --surface-2: #fff3f0;

  /* ---- Brand 3 colors ---- */
  --rose:       #ee7aa6;
  --rose-deep:  #c14d7d;
  --lilac:      #c4a8e0;
  --lilac-deep: #8e6db5;
  --mint:       #a8d8c8;
  --mint-deep:  #6fa893;

  /* ---- Accents ---- */
  --peach:  #ffd5c2;
  --butter: #ffe9b0;
  --sky:    #cee4f5;

  /* ---- Ink (text) ---- */
  --ink:       #4a3a44;
  --ink-sub:   #9a8893;
  --ink-light: #c8b8c2;

  /* ---- Lines & shadows ---- */
  --line:        rgba(238, 122, 166, 0.18);
  --line-strong: rgba(238, 122, 166, 0.30);
  --shadow:      0 2px 16px rgba(193, 77, 125, 0.10);
  --shadow-up:   0 8px 32px rgba(193, 77, 125, 0.15);

  /* ---- States ---- */
  --lock:    #b89cc8;
  --warn:    #e8a55b;
  --success: var(--mint-deep);

  /* ---- Radii ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Spacing scale ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* ---- Typography ---- */
  --font-body:    'Pretendard', 'Noto Sans KR', system-ui, -apple-system, sans-serif;
  --font-serif:   'Gowun Batang', 'Noto Serif KR', 'Times New Roman', serif;
  --font-display: 'Gowun Dodum', 'Pretendard', system-ui, cursive;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  44px;

  --leading-tight: 1.3;
  --leading-base:  1.6;
  --leading-loose: 1.85;

  /* ---- Layout ---- */
  --container: 960px;
  --reading:   720px;

  /* ---- Motion ---- */
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --dur-fast:    .15s;
  --dur-base:    .25s;
  --dur-slow:    .45s;
}

/* Desktop-only: scale text +10% (mobile keeps base sizes) */
@media (min-width: 641px) {
  :root {
    --text-xs:   13.2px;
    --text-sm:   14.3px;
    --text-base: 16.5px;
    --text-md:   18.7px;
    --text-lg:   22px;
    --text-xl:   26.4px;
    --text-2xl:  35.2px;
    --text-3xl:  48.4px;
  }
}

/* ============================================================
   THEME OVERRIDES (Phase 5-C.3)
   ------------------------------------------------------------
   viewer-settings panel offers Light (default) / Sepia / Dark.
   The chosen theme adds a body class and the rules below remap
   the surface + ink + line tokens. Brand pinks (rose / lilac /
   mint) stay roughly the same so the kitschy palette identity
   survives — only the page chrome shifts.
   ============================================================ */

/* Sepia — warm "old paper" feel */
body.is-theme-sepia {
  --bg:        #f5ecd9;
  --surface:   #faf3e0;
  --surface-2: #efe2c4;
  --ink:       #4a3624;
  --ink-sub:   #8a7558;
  --ink-light: #b8a585;
  --line:        rgba(140, 100, 60, 0.18);
  --line-strong: rgba(140, 100, 60, 0.30);
  --shadow:      0 2px 16px rgba(140, 100, 60, 0.10);
  --shadow-up:   0 8px 32px rgba(140, 100, 60, 0.15);
}

/* Dark — soft charcoal with rose retained as brand accent */
body.is-theme-dark {
  --bg:        #1f1a20;
  --surface:   #2a2428;
  --surface-2: #342c30;
  --ink:       #e8dde3;
  --ink-sub:   #ad9faa;
  --ink-light: #6f6470;
  --line:        rgba(238, 122, 166, 0.22);
  --line-strong: rgba(238, 122, 166, 0.36);
  --shadow:      0 2px 16px rgba(0, 0, 0, 0.40);
  --shadow-up:   0 8px 32px rgba(0, 0, 0, 0.55);
}