/* tokens-uniflection.css — locked Uniflection identity tokens
 * Source of truth: claude_design/projects/uniflection_redesign/tokens.md (§2 + §3, locked 2026-05-04)
 * Imported before textbook.css. Don't edit values here without updating tokens.md.
 */

/* Google Fonts: load once at this layer so every page that imports tokens-uniflection.css gets them */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..800;1,6..72,300..800&family=Noto+Serif+SC:wght@400;500;600;700&display=swap');

:root {
  /* ── Light theme (chrome) ──────────────────────────────────────── */
  --color-page: #fcfbf8;              /* near-white magazine paper */
  --color-accent: #a82828;            /* vermillion — chrome master */
  --color-accent-grad-end: #601515;
  --color-ink: #0a0a08;               /* primary text */
  --color-ink-secondary: #2a2a26;
  --color-ink-3: #6a655c;
  --color-rule: rgba(168, 40, 40, 0.22);
  --color-rule-dark: rgba(10, 10, 8, 0.15);
  --color-card-surface: rgba(0, 0, 0, 0.025);

  /* ── Per-content-object accent library ────────────────────────── */
  --c-vermillion: #a82828;
  --c-navy:       #1a2d4a;
  --c-rust:       #8a3a1a;
  --c-forest:     #2d4a32;
  --c-plum:       #5a2a4a;

  /* ── Typography ───────────────────────────────────────────────── */
  --font-heading: 'Newsreader', 'Noto Serif SC', Georgia, serif;
  --font-body:    'Newsreader', 'Noto Serif SC', Georgia, serif;
  --font-ui:      'Newsreader', 'Noto Serif SC', Georgia, serif;

  /* Type scale */
  --text-display:    96px;
  --text-h1-page:    64px;
  --text-h2-section: 36px;
  --text-h2-card:    24px;
  --text-h3-card:    20px;
  --text-lede:       21px;
  --text-body:       17px;
  --text-small:      14px;
  --text-meta:       12px;
  --text-label:      11px;
  --text-tag:        10px;

  /* ── Layout ───────────────────────────────────────────────────── */
  --width-content: 1280px;
  --width-reading: 720px;
  --width-cover:   240px;
  --height-cover:  320px;
  --gap-section:   60px;
  --gap-card:      20px;
  --padding-page:  32px;
}

/* ── Dark theme overrides ────────────────────────────────────────── */
html[data-theme="dark"] {
  --color-page: #0f0e0c;
  --color-accent: #d6604a;
  --color-accent-grad-end: #7a2818;
  --color-ink: #fcfbf8;
  --color-ink-secondary: #9a948a;
  --color-rule: rgba(214, 96, 74, 0.35);
  --color-card-surface: rgba(252, 251, 248, 0.04);
}

/* ── ZH text density bump ────────────────────────────────────────── */
[lang="zh"] {
  line-height: 1.85;
}

/* ── Wordmark ────────────────────────────────────────────────────── */
.wordmark {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.wordmark-hl {
  color: var(--color-accent);
  font-style: italic;
  font-weight: 500;
}