/* =============================================================================
 * Atlas Climbing — design tokens.
 *
 * Source of truth: .design/design-system/tokens.json (colour, space, radius,
 * shadow, stroke, 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).
 *
 * The two themes are `chalk` and `basalt`, not light and dark. They ship in
 * three blocks, and the order matters:
 *   1. :root                                   the complete chalk set
 *   2. prefers-color-scheme: dark, guarded      basalt for system dark
 *   3. :root[data-theme="dark"]                 basalt pinned, wins either way
 *
 * Two tokens exist only for the inverted band — `rope-inverse` and
 * `summit-inverse`. The accent flips lightness between themes, so `rope-600`
 * fails contrast on `granite-900`. The handoff says not to simplify them away.
 *
 * theme.json declares its palette as var() references into this file, so the
 * WordPress presets are theme-aware for free and a colour is defined once.
 * ========================================================================== */

:root {
	/* Grounds */
	--chalk-100: #f0efec;
	--chalk-000: #fbfaf8;
	--granite-200: #e2e0db;
	--granite-900: #1d2124;

	/* Ink */
	--ink-900: #171a1d;
	--ink-700: #434a51;
	--ink-500: #61686f;
	--ink-inverse: #f0efec;
	--ink-inverse-muted: #a7aeb4;

	/* Rules */
	--hairline: #dbd8d2;
	--hairline-strong: #7c766d;
	--topo-line: #c4beb4;

	/* Accent — rationed. Primary fill, link text, filled meter bars, the
	 * progress arc, the current lesson marker. */
	--rope-600: #b34214;
	--rope-700: #9b3a16;
	--rope-100: #fae6dc;
	--on-rope: #ffffff;

	/* The inverted band's pair. Not interchangeable with rope-600. */
	--rope-inverse: #f2935f;
	--summit-inverse: #7fc9a4;

	--focus-ring: #9b3a16;

	/* Signals. summit means finished and nothing else. */
	--summit-600: #2c6a4f;
	--alert-600: #a12a1e;

	/* Shadow — two levels, and they are the only two. */
	--shadow-raise: 0 1px 2px rgba(23, 26, 29, .05), 0 6px 16px rgba(23, 26, 29, .07);
	--shadow-float: 0 10px 24px rgba(23, 26, 29, .1), 0 28px 64px rgba(23, 26, 29, .12);

	/* Type families. Faces are self-hosted — see assets/css/fonts.css. */
	--font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
	--font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Space — 4px base, but not a pure 4x ramp above space-4. */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 28px;
	--space-7: 40px;
	--space-8: 56px;
	--space-9: 80px;
	--space-10: 120px;

	/* Radius */
	--radius-none: 0;
	--radius-sm: 4px;
	--radius-md: 10px;
	--radius-lg: 18px;
	--radius-pill: 999px;

	/* Stroke */
	--stroke-hair: 1px;
	--stroke-topo: 1.5px;
	--stroke-bold: 3px;

	/* Opacity */
	--opacity-topo: .9;
	--opacity-locked: .55;
	--opacity-disabled: .4;

	/* Motion — copied verbatim from design-system/motion.md. */
	--dur-1: 110ms;        /* state change: colour, border, opacity */
	--dur-2: 220ms;        /* transform on a control */
	--dur-3: 480ms;        /* an element entering */
	--dur-4: 820ms;        /* a headline or a whole section entering */
	--dur-draw: 1400ms;    /* a contour line drawing itself */
	--dur-progress: 900ms; /* a ring or bar moving to a new value */
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--ease-line: cubic-bezier(.4, 0, .1, 1);
	--stagger: 80ms;

	/* Layout */
	--col: min(1160px, 100%);
	--rail: 280px;
}

/* Basalt, when the reader's system asks for it and the page is not pinned. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--chalk-100: #131619;
		--chalk-000: #1a1e22;
		--granite-200: #21262b;
		--granite-900: #f0efec;
		--ink-900: #f1efec;
		--ink-700: #c8ced3;
		--ink-500: #949ba2;
		--ink-inverse: #171a1d;
		--ink-inverse-muted: #525a60;
		--hairline: #272d33;
		--hairline-strong: #7a838a;
		--topo-line: #2b333a;
		--rope-600: #f08a56;
		--rope-700: #f7a377;
		--rope-100: #2b1710;
		--on-rope: #23120a;
		--rope-inverse: #9b3a16;
		--summit-inverse: #2c6a4f;
		--focus-ring: #f7a377;
		--summit-600: #79c6a0;
		--alert-600: #f2938a;
		--shadow-raise: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px rgba(0, 0, 0, .42);
		--shadow-float: 0 10px 24px rgba(0, 0, 0, .55), 0 28px 64px rgba(0, 0, 0, .5);
	}
}

/* Basalt, pinned. Also the hook an editor preview or a future toggle uses. */
:root[data-theme="dark"] {
	--chalk-100: #131619;
	--chalk-000: #1a1e22;
	--granite-200: #21262b;
	--granite-900: #f0efec;
	--ink-900: #f1efec;
	--ink-700: #c8ced3;
	--ink-500: #949ba2;
	--ink-inverse: #171a1d;
	--ink-inverse-muted: #525a60;
	--hairline: #272d33;
	--hairline-strong: #7a838a;
	--topo-line: #2b333a;
	--rope-600: #f08a56;
	--rope-700: #f7a377;
	--rope-100: #2b1710;
	--on-rope: #23120a;
	--rope-inverse: #9b3a16;
	--summit-inverse: #2c6a4f;
	--focus-ring: #f7a377;
	--summit-600: #79c6a0;
	--alert-600: #f2938a;
	--shadow-raise: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px rgba(0, 0, 0, .42);
	--shadow-float: 0 10px 24px rgba(0, 0, 0, .55), 0 28px 64px rgba(0, 0, 0, .5);
}

/* Required by motion.md. Every script also checks matchMedia and takes its own
 * short path — contours render fully drawn, rings paint their real value,
 * parallax is never bound. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}