/* =============================================================
   tokens.css — Design Token Definitions
   A* Quest Tutorial · Vanilla CSS · No framework
   All values derived from step023/step025/step030 research
   ============================================================= */

:root {
	/* ----------------------------------------------------------
     Typography — 4 sizes, 2 weights only (CLAUDE.md rule)
     ---------------------------------------------------------- */
	--font-display: georgia, "Times New Roman", serif;
	--font-body: "Helvetica Neue", helvetica, sans-serif;
	--font-mono: "JetBrains Mono", "Courier New", monospace;
	--size-xl: 40px;
	--size-lg: 24px;
	--size-md: 16px;
	--size-sm: 14px;
	--lh-tight: 1.15;
	--lh-snug: 1.3;
	--lh-base: 1.5;
	--weight-normal: 400;
	--weight-bold: 700;

	/* ----------------------------------------------------------
     Color — 60-30-10 rule
     Dominant 60%: --bg (white)
     Secondary 30%: --fg (dark gray)
     Accent 10%: --accent (warm orange)
     ---------------------------------------------------------- */
	--bg: #fff;
	--fg: #1f2937;
	--muted: #6b7280;
	--accent: #c04a1e;
	--border: #e5e7eb;

	/* Algorithm state colors (canvas cells) */
	--state-start: #10b981;
	--state-goal: #ef4444;
	--state-wall: #111827;
	--state-open: #60a5fa;
	--state-closed: #c4b5fd;
	--state-path: #22c55e;
	--state-empty: #f9fafb;

	/* ----------------------------------------------------------
     Spacing — 8pt grid, all multiples of 4 or 8
     ---------------------------------------------------------- */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 16px;
	--s-4: 24px;
	--s-5: 32px;
	--s-6: 48px;
	--s-8: 64px;
	--s-12: 96px;

	/* ----------------------------------------------------------
     Border radius — capped at 8px (CLAUDE.md rule)
     ---------------------------------------------------------- */
	--r-0: 0;
	--r-1: 4px;
	--r-2: 8px;

	/* ----------------------------------------------------------
     Shadow — Swiss aesthetic: restrained, purposeful
     ---------------------------------------------------------- */
	--shadow-sm: 0 1px 2px rgb(0 0 0 / 6%);
	--shadow-md: 0 4px 12px rgb(0 0 0 / 8%);

	/* ----------------------------------------------------------
     Breakpoints (reference values — used in JS + comments)
     ---------------------------------------------------------- */
	--bp-sm: 640px;
	--bp-md: 1024px;
	--bp-lg: 1280px;

	/* ----------------------------------------------------------
     Z-index layers
     ---------------------------------------------------------- */
	--z-base: 0;
	--z-tooltip: 1;
	--z-modal: 5;
	--z-header: 10;
	--z-sheet: 20;

	/* ----------------------------------------------------------
     Motion
     ---------------------------------------------------------- */
	--duration: 300ms;
	--ease: ease-in-out;
	--transition: var(--duration) var(--ease);

	/* Header height — used in sticky offset calculations */
	--header-h: 56px;
}