/**
 * Design tokens — mirrors the source design system 1:1 (oklch color space).
 * Loaded before app.css so component styles can reference these custom
 * properties. Dark-mode block is gated behind [data-theme="dark"] rather
 * than prefers-color-scheme, since the org's public site is light-only by
 * design; the block is kept for future admin-triggered dark mode.
 */

:root {
	--radius: 0.5rem;

	--background: oklch(0.985 0.012 80);
	--foreground: oklch(0.22 0.03 40);
	--card: oklch(1 0 0);
	--card-foreground: oklch(0.22 0.03 40);
	--popover: oklch(1 0 0);
	--popover-foreground: oklch(0.22 0.03 40);

	/* Saffron / diya flame */
	--primary: oklch(0.62 0.18 45);
	--primary-foreground: oklch(0.99 0.01 80);
	--primary-glow: oklch(0.78 0.17 70);
	/* AA-safe (≥4.5:1 on --background/--card/white text) variant of
	   --primary — use for body-size link/label text and for any button
	   background carrying --primary-foreground text. --primary itself
	   only measures ~3.2:1 in both directions, which is fine for large
	   text (≥24px) and non-text UI (borders, icons, focus rings) per
	   WCAG 2.2 1.4.11, but fails 1.4.3 for normal body text. */
	--primary-strong: oklch(0.48 0.17 45);

	/* Deep forest teal — trust */
	--secondary: oklch(0.36 0.06 180);
	--secondary-foreground: oklch(0.985 0.012 80);

	--muted: oklch(0.94 0.02 75);
	--muted-foreground: oklch(0.45 0.04 50);
	--accent: oklch(0.93 0.05 85);
	--accent-foreground: oklch(0.28 0.05 40);
	/* Darkened from the source design's 0.55 for AA contrast with white text
	   (see --primary-strong note — same issue, mid-lightness saturated hue
	   paired with near-white foreground). */
	--destructive: oklch(0.42 0.2 28);
	--destructive-foreground: oklch(0.99 0.01 80);

	--border: oklch(0.88 0.02 70);
	--input: oklch(0.88 0.02 70);
	--ring: oklch(0.62 0.18 45);

	/* Both stops kept within the AA-safe range for --primary-foreground
	   text (see --primary-strong note above) — the source design's
	   lighter (0.62 → 0.78) gradient reads fine visually but fails
	   contrast when text sits directly on it. */
	--gradient-sunrise: linear-gradient(135deg, #fcb900, #ff6900);
	--gradient-warm: linear-gradient(180deg, oklch(0.985 0.012 80), oklch(0.94 0.04 80));
	--shadow-elegant: 0 24px 60px -24px oklch(0.36 0.06 180 / 0.35);
	--shadow-warm: 0 18px 40px -20px oklch(0.62 0.18 45 / 0.45);

	--font-serif: "Fraunces", ui-serif, Georgia, serif;
	--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

	--container-max: 80rem; /* 1280px, matches max-w-7xl */
}

[data-theme="dark"] {
	--background: oklch(0.129 0.042 264.695);
	--foreground: oklch(0.984 0.003 247.858);
	--card: oklch(0.208 0.042 265.755);
	--card-foreground: oklch(0.984 0.003 247.858);
	--popover: oklch(0.208 0.042 265.755);
	--popover-foreground: oklch(0.984 0.003 247.858);
	--primary: oklch(0.929 0.013 255.508);
	--primary-foreground: oklch(0.208 0.042 265.755);
	--primary-strong: oklch(0.75 0.02 255.508);
	--secondary: oklch(0.279 0.041 260.031);
	--secondary-foreground: oklch(0.984 0.003 247.858);
	--muted: oklch(0.279 0.041 260.031);
	--muted-foreground: oklch(0.704 0.04 256.788);
	--accent: oklch(0.279 0.041 260.031);
	--accent-foreground: oklch(0.984 0.003 247.858);
	--border: oklch(1 0 0 / 10%);
	--input: oklch(1 0 0 / 15%);
	--ring: oklch(0.551 0.027 264.364);
}