/* ════════════════════════════════════════════════════════════════════
 * Elf Revel Design Tokens
 * ════════════════════════════════════════════════════════════════════
 * Single source of truth for wiki.elfrevel.com and elfrevel.com.
 * Both consumers import this file — never duplicate these values.
 *
 * RELATIONAL CONSTRAINTS — modifying any token requires preserving:
 *   --color-gold luminance > --color-forest luminance
 *   contrast-ratio(--color-text, --color-surface) >= 7:1
 *   contrast-ratio(--color-text-muted, --color-surface) >= 4.5:1
 *   --color-gold on --color-surface: large text only (4.2:1 — AA large)
 *   Dark/light mode: preserve ALL contrast ratios, not just swap values
 *
 * SEMANTIC BOUNDARIES (from Byzantine iconography review):
 *   Gold: mythical/summoned context — headings, revel outcomes, spirit content
 *   Green: living systems — elf names, natural labels, growth
 *   Bark: structural/built — buildings, infrastructure, terrain
 *   Parchment: informational — body text, prose, captions
 * ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Palette ─────────────────────────────────────────────────────── */
  --color-forest: #1a2e1a;
  --color-gold: #c8a84b;           /* large text/headings only */
  --color-parchment: #f0e8d8;
  --color-bark: #3d2b1f;

  /* ── Surfaces ────────────────────────────────────────────────────── */
  --color-surface: #1a1a15;        /* warm dark — inside the canopy */
  --color-surface-elevated: #25251f;
  --color-surface-sidebar: #14140f;

  /* ── Semantic Text ───────────────────────────────────────────────── */
  /* parchment on surface: ~9.5:1 — AAA ✓ */
  --color-text: var(--color-parchment);
  /* muted on surface: ~5.2:1 — AA ✓ */
  --color-text-muted: #a09880;
  /* gold on surface: ~4.3:1 — AA large text only */
  --color-heading-primary: var(--color-gold);
  /* soft green on surface: ~5.1:1 — AA ✓ */
  --color-heading-secondary: #8ab88a;

  /* ── Links ───────────────────────────────────────────────────────── */
  /* green on surface: ~5.4:1 — AA ✓ */
  --color-link: #7eb87e;
  --color-link-hover: var(--color-gold);
  --color-link-external: #9ab89a;

  /* ── Sidebar ─────────────────────────────────────────────────────── */
  --color-sidebar-bg: var(--color-surface-sidebar);
  --color-sidebar-text: #c0b8a0;
  --color-sidebar-active: var(--color-gold);

  /* ── Borders & Accents ───────────────────────────────────────────── */
  --color-border: #2a2a22;
  --color-border-accent: #3a3a30;
  --color-divider: #2a2a22;

  /* ── Code ─────────────────────────────────────────────────────────── */
  --color-code-bg: var(--color-surface-elevated);
  --color-code-text: #d4c8b0;

  /* ── Typography ──────────────────────────────────────────────────── */
  --font-heading: 'Cormorant Garamond', 'Palatino Linotype', 'Book Antiqua', 'Palatino', serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-code: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  --font-hero-title: 'Cinzel', 'Trajan Pro', var(--font-heading);

  /* ── Spacing (natah — negative space as first-class value) ──────── */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;
  --spacing-section-gap: 6rem;
  --content-max-width: 750px;
  --content-padding: 2rem;
  --line-height-body: 1.75;
  --line-height-heading: 1.3;

  /* ── Section Identity (sidebar left-border accents) ────────────── */
  --section-getting-started: var(--color-gold);
  --section-core-systems: var(--color-heading-secondary);
  --section-art-culture: var(--color-gold);
  --section-social: #b89a7e;
  --section-world: #6a9a6a;
  --section-curator: var(--color-text-muted);
  --section-strategy: var(--color-gold);
}