/* =============================================================
   toi-tokens.css — Twin Oaks Imaginations design tokens
   Single source of truth for the Saddle Brown & Gold system,
   shared by the public site and the internal /workshop area.
   Phase 1 (2026-06-11): extracted from styles.css :root.

   WCAG AA contrast (verified 2026-06-11) — approved pairings:
     parchment on espresso  12.63:1   gold on espresso     11.10:1
     parchment on card       8.80:1   gold on card          7.73:1
     gold on saddle brown    5.06:1   white on green        4.86:1
     white on dark green     7.92:1   white on saddle       7.10:1
     espresso on parchment  13.58:1   muted tan on espresso 6.92:1
     muted tan on card       4.82:1   tan on espresso       6.60:1
   All pass AA for normal text. Do not introduce new pairings
   without checking contrast.
   ============================================================= */

:root {
	/* ---- Brand palette (Saddle Brown & Gold) ---- */
	--brown-page: #8b4513;
	--brown-card: #61300d;
	--brown-deep: #3d1a06;
	--parchment: #f5e6c8;
	--gold: #ffd700;
	--green: #4a7c59;
	--green-dark: #35593f;
	--tan: #c4a472;
	--text-light: #ffffff;
	--text-dark: #2b1a0a;
	--text-muted: #c8a87a;

	/* ---- Derived surfaces (dark-dominant model for internal pages
	        and future public restyle; espresso grounds, brown raised) ---- */
	--surface: var(--brown-deep);
	--surface-raised: var(--brown-card);
	--surface-deep: #241003;
	--border-subtle: rgba(196, 164, 114, 0.25);  /* tan @ 25% */
	--border-accent: rgba(255, 215, 0, 0.25);    /* gold @ 25% */

	/* ---- Effects ---- */
	--shadow: rgba(0, 0, 0, 0.4);
	--radius: 10px;
	--nav-height: 58px;

	/* ---- Focus (visible keyboard focus is an acceptance criterion) ---- */
	--focus-ring: 2px solid var(--gold);
	--focus-offset: 2px;

	/* ---- Typography ---- */
	--font-display: 'Special Elite', 'Trebuchet MS', cursive;
	--font-body: 'Trebuchet MS', Tahoma, Geneva, Verdana, sans-serif;
	--font-mono: Consolas, 'Courier New', monospace;

	/* ---- Spacing scale (8px base) ---- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 32px;
	--space-6: 48px;
}