/*
 * Good Footing — design tokens (single source of truth for every colour, space, radius, shadow).
 * Values come from the app: iOS/App/Assets.xcassets/*.colorset (light + dark variants).
 * Editing a colour here changes the whole site; nothing else hard-codes a colour.
 */

:root {
	/* Colour — light (the app's default scheme) */
	--gf-bg: #f8f1e6;
	--gf-surface: #fffcf6;
	--gf-surface-top: #fffefa;
	--gf-surface-bottom: #fbf5ea;
	--gf-text: #2a241f;
	--gf-text-muted: #655a50;
	--gf-accent: #8f4323;
	--gf-primary: #2e4a33;
	--gf-primary-top: #5a8052;
	--gf-primary-mid: #4a7044;
	--gf-primary-bottom: #3e6138;
	--gf-primary-pressed: #34532f;
	--gf-secondary: #54722f;
	--gf-sun: #d9a441;
	--gf-sky: #7fa3c0;
	--gf-danger: #bf5347;
	--gf-on-strong: #ffffff;      /* text on a strong (green) fill */
	--gf-on-light: #2a241f;       /* text on a light (ochre/sky) fill */
	--gf-shadow-rgb: 59 47 34;
	--gf-border: #d8ccbd;         /* a soft, warm hairline */

	/* Space (8px rhythm) */
	--gf-space-1: 0.5rem;
	--gf-space-2: 0.75rem;
	--gf-space-3: 1rem;
	--gf-space-4: 1.5rem;
	--gf-space-5: 2rem;
	--gf-space-6: 3rem;
	--gf-space-7: 4.5rem;
	--gf-space-8: 6rem;

	/* Radius */
	--gf-radius-sm: 8px;
	--gf-radius-md: 14px;
	--gf-radius-lg: 22px;
	--gf-radius-pill: 999px;

	/* Elevation */
	--gf-shadow-sm: 0 1px 2px rgb(var(--gf-shadow-rgb) / 0.08), 0 1px 1px rgb(var(--gf-shadow-rgb) / 0.06);
	--gf-shadow-md: 0 8px 24px rgb(var(--gf-shadow-rgb) / 0.12), 0 2px 6px rgb(var(--gf-shadow-rgb) / 0.08);

	/* Type — titles prefer New York on Apple devices; the body uses the system stack. No font download. */
	--gf-font-title: ui-serif, "New York", Georgia, "Times New Roman", serif;
	--gf-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--gf-text-base: 1.125rem;     /* 18px floor: the audience reads large text */
	--gf-leading: 1.6;

	/* Layout */
	--gf-maxw: 72rem;
	--gf-maxw-prose: 42rem;

	color-scheme: light;
}

/* The app's dark scheme. */
:root[data-theme="dark"] {
	--gf-bg: #1f1b17;
	--gf-surface: #2a251f;
	--gf-surface-top: #2e2923;
	--gf-surface-bottom: #27221c;
	--gf-text: #f2ebe1;
	--gf-text-muted: #bdb2a5;
	--gf-accent: #e0915f;
	--gf-primary: #4a7151;
	--gf-primary-top: #567c4e;
	--gf-primary-mid: #4a7044;
	--gf-primary-bottom: #3e6138;
	--gf-primary-pressed: #34532f;
	--gf-secondary: #7fae5a;
	--gf-sun: #d2a04a;
	--gf-sky: #7296b5;
	--gf-danger: #ac4b40;
	--gf-on-strong: #ffffff;
	--gf-on-light: #2a241f;
	--gf-shadow-rgb: 0 0 0;
	--gf-border: #3d3530;
	color-scheme: dark;
}

/* No-JS first paint: follow the OS when no explicit choice was stored (the boot script sets data-theme). */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--gf-bg: #1f1b17;
		--gf-surface: #2a251f;
		--gf-surface-top: #2e2923;
		--gf-surface-bottom: #27221c;
		--gf-text: #f2ebe1;
		--gf-text-muted: #bdb2a5;
		--gf-accent: #e0915f;
		--gf-primary: #4a7151;
		--gf-primary-top: #567c4e;
		--gf-secondary: #7fae5a;
		--gf-sun: #d2a04a;
		--gf-sky: #7296b5;
		--gf-danger: #ac4b40;
		--gf-shadow-rgb: 0 0 0;
		--gf-border: #3d3530;
		color-scheme: dark;
	}
}

/* Walkthrough kit variables: map the kit's fallbacks onto the app tokens (auto light/dark). */
:root {
	--gf-heading: var(--gf-text);
	--gf-ink: var(--gf-text);
	--gf-text-faint: var(--gf-text-muted);
	--gf-marker: var(--gf-sun);
	--gf-hairline: var(--gf-border);
	--app-bg: #ffffff;
}