/* =============================================================================
 * Cascade Crest — design tokens.
 *
 * Source of truth: .design/design-system/tokens.json (colour, space, radius,
 * shadow, opacity) and .design/design-system/motion.md (durations, easings,
 * stagger — the token file cannot carry a motion family, so that prose block is
 * copied here verbatim).
 *
 * Three blocks, in this order, and the order matters:
 *   1. :root                                  the complete light (Daylight) set
 *   2. prefers-color-scheme: dark, guarded     dark (Overcast) for system dark
 *   3. :root[data-theme="dark"]                explicit override wins either way
 *
 * theme.json declares its palette as var() references into this file, so the
 * WordPress presets (.has-copper-600-color and friends) are theme-aware for
 * free and there is exactly one place a colour is defined.
 * ========================================================================== */

:root {
	/* Surfaces */
	--surface-100: #f6f4f1;
	--surface-000: #ffffff;
	--surface-200: #ebe7e1;
	--surface-inverse: #101416;

	/* Ink */
	--ink-900: #101416;
	--ink-700: #3a4248;
	--ink-500: #676f76;
	--ink-inverse: #f6f4f1;
	--ink-inverse-muted: #a9b0b5;

	/* Rules */
	--hairline: #dedad3;
	--hairline-strong: #8a837a;

	/* Accent — rationed. Primary fill, link text, eyebrow rule, slider handle. */
	--copper-600: #9a4f22;
	--copper-700: #7d3f1a;
	--copper-100: #f5e8de;
	--on-copper: #ffffff;
	--focus-ring: #7d3f1a;

	/* Signals */
	--storm-600: #2c5a6b;
	--storm-100: #e3eef2;
	--moss-600: #2d5b39;
	--alert-600: #9e2a1e;

	/* Shadow — two levels only. Structure comes from hairline. */
	--shadow-raise: 0 1px 2px rgba(16, 20, 22, .05), 0 4px 14px rgba(16, 20, 22, .06);
	--shadow-float: 0 8px 20px rgba(16, 20, 22, .1), 0 24px 56px rgba(16, 20, 22, .12);

	/* Type families. Faces are self-hosted — see assets/css/fonts.css. */
	--font-display: Fraunces, "Iowan Old Style", Georgia, serif;
	--font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Space — 4px base. */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 144px;

	/* Radius — nearly square; curves are reserved for controls. */
	--radius-none: 0;
	--radius-sm: 2px;
	--radius-md: 6px;
	--radius-lg: 14px;
	--radius-pill: 999px;

	/* Opacity */
	--opacity-muted: .64;
	--opacity-disabled: .4;

	/* Motion — copied verbatim from design-system/motion.md. */
	--dur-1: 120ms;        /* state change: colour, opacity, border */
	--dur-2: 240ms;        /* transform on a control: lift, nudge, icon slide */
	--dur-3: 520ms;        /* an element entering the page */
	--dur-4: 900ms;        /* a headline or a full section entering */
	--dur-count: 1600ms;   /* a stat counting up */
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
	--stagger: 90ms;

	/* Layout */
	--col: min(1200px, 100%);
}

/* Overcast, when the reader's system asks for it and the page has not been
 * pinned to light. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--surface-100: #0e1214;
		--surface-000: #14181b;
		--surface-200: #1b2126;
		--surface-inverse: #f6f4f1;
		--ink-900: #f2efeb;
		--ink-700: #c6ccd1;
		--ink-500: #929aa1;
		--ink-inverse: #101416;
		--ink-inverse-muted: #4f575d;
		--hairline: #262d33;
		--hairline-strong: #6e777e;
		--copper-600: #e08a4e;
		--copper-700: #f0a36a;
		--copper-100: #2a1a10;
		--on-copper: #1a0e05;
		--focus-ring: #f0a36a;
		--storm-600: #7fbcd2;
		--storm-100: #13272f;
		--moss-600: #8cc89e;
		--alert-600: #f2938a;
		--shadow-raise: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .4);
		--shadow-float: 0 8px 20px rgba(0, 0, 0, .55), 0 24px 56px rgba(0, 0, 0, .5);
	}
}

/* Overcast, pinned. Also the hook an editor preview or a future toggle uses. */
:root[data-theme="dark"] {
	--surface-100: #0e1214;
	--surface-000: #14181b;
	--surface-200: #1b2126;
	--surface-inverse: #f6f4f1;
	--ink-900: #f2efeb;
	--ink-700: #c6ccd1;
	--ink-500: #929aa1;
	--ink-inverse: #101416;
	--ink-inverse-muted: #4f575d;
	--hairline: #262d33;
	--hairline-strong: #6e777e;
	--copper-600: #e08a4e;
	--copper-700: #f0a36a;
	--copper-100: #2a1a10;
	--on-copper: #1a0e05;
	--focus-ring: #f0a36a;
	--storm-600: #7fbcd2;
	--storm-100: #13272f;
	--moss-600: #8cc89e;
	--alert-600: #f2938a;
	--shadow-raise: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .4);
	--shadow-float: 0 8px 20px rgba(0, 0, 0, .55), 0 24px 56px rgba(0, 0, 0, .5);
}

/* The blanket rule from motion.md. Not optional — every script also checks
 * matchMedia and takes its own short path. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}