/* ───────────────────────────────────────────────────────────
   Dasi — Design Tokens
   Three themes share scale; only color/texture changes.
   Ported from claude_design/Korean vocab/Plan 1/design_handoff/styles/tokens.css
   ─────────────────────────────────────────────────────────── */

:root {
  /* Type scale — Hangul-forward, generous */
  --t-display: 56px;
  --t-display-lh: 1.0;
  --t-h1: 36px;
  --t-h1-lh: 1.1;
  --t-h2: 28px;
  --t-h2-lh: 1.15;
  --t-h3: 22px;
  --t-h3-lh: 1.25;
  --t-body: 16px;
  --t-body-lh: 1.5;
  --t-small: 14px;
  --t-tiny: 12px;
  --t-caps: 11px;

  /* Korean type sizes (always larger than english counterparts) */
  --kr-display: 84px;
  --kr-h1: 56px;
  --kr-h2: 40px;
  --kr-body: 22px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

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

  --font-kr: 'Noto Serif KR', 'Apple SD Gothic Neo', 'Malgun Gothic', serif;
  --font-kr-display: 'Gowun Batang', 'Noto Serif KR', serif;
  --font-en: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-ui: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* THEME: Hangul (default) — warm parchment with ink + jade accent */
  --bg: #f3ede0;
  --bg-2: #ebe3d0;
  --bg-3: #e0d6bf;
  --surface: #faf6ec;
  --surface-2: #f7f1e1;
  --ink: #1a1815;
  --ink-2: #3a352c;
  --ink-3: #6b6354;
  --ink-4: #a39a86;
  --hairline: rgba(26, 24, 21, 0.10);
  --hairline-2: rgba(26, 24, 21, 0.18);

  --accent: #2f5d4a;            /* deep jade */
  --accent-2: #4a8a6e;
  --accent-soft: #d4e4d6;
  --accent-ink: #faf6ec;

  --warn: #c0533a;              /* dancheong red */
  --warn-soft: #f1d6cd;
  --gold: #b8862f;
  --gold-soft: #ecd9a3;
  --plum: #6e3a5c;

  --shadow-1: 0 1px 2px rgba(26,24,21,0.06), 0 2px 8px rgba(26,24,21,0.04);
  --shadow-2: 0 4px 20px rgba(26,24,21,0.08), 0 1px 4px rgba(26,24,21,0.06);
  --shadow-3: 0 20px 60px rgba(26,24,21,0.18), 0 6px 20px rgba(26,24,21,0.10);
}

/* ── Dark / jewel theme ──────────────────────────────────── */
[data-theme="dark"] {
  --bg: #0e1418;
  --bg-2: #131a20;
  --bg-3: #1a232a;
  --surface: #161e25;
  --surface-2: #1d2832;
  --ink: #f0ece1;
  --ink-2: #d6cfbf;
  --ink-3: #948a76;
  --ink-4: #5d564a;
  --hairline: rgba(240, 236, 225, 0.08);
  --hairline-2: rgba(240, 236, 225, 0.16);

  --accent: #e8c662;            /* ginko gold */
  --accent-2: #f4dc94;
  --accent-soft: rgba(232,198,98,0.14);
  --accent-ink: #0e1418;

  --warn: #e07d5f;
  --warn-soft: rgba(224,125,95,0.14);
  --gold: #e8c662;
  --gold-soft: rgba(232,198,98,0.18);
  --plum: #c47ea2;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2);
  --shadow-2: 0 4px 20px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.25);
  --shadow-3: 0 20px 60px rgba(0,0,0,0.55), 0 6px 20px rgba(0,0,0,0.35);
}

/* ── Warm paper theme — softest of the three ─────────────── */
[data-theme="paper"] {
  --bg: #f7f3e9;
  --bg-2: #efe9d8;
  --bg-3: #e6dfca;
  --surface: #fdfaf2;
  --surface-2: #f8f3e3;
  --ink: #2c241a;
  --ink-2: #4a3f31;
  --ink-3: #7d705c;
  --ink-4: #b3a78f;
  --hairline: rgba(44, 36, 26, 0.08);
  --hairline-2: rgba(44, 36, 26, 0.15);

  --accent: #8a4a32;            /* terracotta */
  --accent-2: #a86749;
  --accent-soft: #f0d9c8;
  --accent-ink: #fdfaf2;

  --warn: #b04a2f;
  --warn-soft: #f1d4c6;
  --gold: #a87a2c;
  --gold-soft: #ecdba1;
  --plum: #6c3a52;
}

/* ── Base ──────────────────────────────────────────────── */
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
}

/* Korean text utility */
.kr {
  font-family: var(--font-kr);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.kr-display {
  font-family: var(--font-kr-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Number utility */
.tab-num { font-variant-numeric: tabular-nums; }

/* Hairline divider */
.hairline { background: var(--hairline); height: 1px; width: 100%; }

/* Scroll containers — hide scrollbars but allow scroll */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }