/*
 * Grimshaw design tokens, copied from the Grimshaw design system (tokens.json).
 * The site always uses the light theme. The dark tokens are kept below and apply
 * only when the page opts in with data-theme="dark" on <html> (for a future toggle).
 * theme.json's palette repeats the light values as hex, for the editor's colour tools.
 */

:root {
	color-scheme: light;

	/* Gules */
	--gw-brand-band: #a13035;
	--gw-brand: #a13035;
	--gw-brand-hover: #7f2429;
	--gw-brand-active: #601b1f;
	--gw-brand-subtle: #fff4f3;
	--gw-brand-muted: #ffe4e1;
	--gw-on-brand: #ffffff;
	--gw-on-band-muted: #ffe4e1;
	--gw-band-action: #fffdfd;
	--gw-band-action-hover: #fff4f3;
	--gw-on-band-action: #601b1f;
	--gw-link: #a13035;
	--gw-link-hover: #601b1f;
	--gw-focus: #c64947;
	--gw-mark: #a13035;

	/* Argent */
	--gw-bg: #f8f5f4;
	--gw-surface: #fffdfd;
	--gw-surface-sunken: #e8e1e1;
	--gw-border-subtle: #e8e1e1;
	--gw-border: #ded7d7;
	--gw-border-strong: #7e7776;

	/* Sable */
	--gw-text: #130f0f;
	--gw-text-secondary: #524b4b;
	--gw-text-tertiary: #686161;

	/* Or */
	--gw-accent: #8d690b;

	/* Fixed inks for the mark */
	--gw-crimson-600: #a13035;
	--gw-ash-950: #130f0f;

	/* Elevation and focus */
	--gw-shadow-sm: 0 1px 2px #130f0f14, 0 1px 3px #130f0f0f;
	--gw-shadow-lg: 0 8px 24px -6px #130f0f29, 0 2px 6px #130f0f14;
	--gw-focus-ring: 0 0 0 2px #f8f5f4, 0 0 0 4px #c64947;
	--gw-focus-ring-on-band: 0 0 0 2px #a13035, 0 0 0 4px #ffffff;
}

/* Dark theme: opt-in only. */
:root[data-theme="dark"] {
	color-scheme: dark;

	--gw-brand: #c64947;
	--gw-brand-hover: #a13035;
	--gw-brand-active: #7f2429;
	--gw-brand-subtle: #290b0c;
	--gw-brand-muted: #441416;
	--gw-link: #f2a39c;
	--gw-link-hover: #fbc7c3;
	--gw-focus: #f2a39c;
	--gw-mark: #f8f5f4;

	--gw-bg: #130f0f;
	--gw-surface: #1f1b1a;
	--gw-surface-sunken: #0a0707;
	--gw-border-subtle: #2a2525;
	--gw-border: #373131;
	--gw-border-strong: #7e7776;

	--gw-text: #f8f5f4;
	--gw-text-secondary: #c7bfbe;
	--gw-text-tertiary: #9e9696;

	--gw-accent: #e4bd85;

	--gw-shadow-sm: 0 1px 3px #000000a6;
	--gw-shadow-lg: 0 12px 28px -4px #000000cc;
	--gw-focus-ring: 0 0 0 2px #130f0f, 0 0 0 4px #f2a39c;
}