/*
 * ScareSpots design tokens. One source for the public site and the ScareSpots admin screens.
 * Direction "Reisgids": warm paper in light mode, "kaarslicht" (warm near black) in dark mode.
 * Every colour pair that is used for text or for a control edge has a measured contrast ratio, checked by tests/test_tokens.php.
 * Dark mode is chosen with data-theme="dark" on <html> (public site) or .ss-admin[data-theme="dark"] (admin).
 */

@font-face {
	font-family: "Inter";
	src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Fraunces";
	src: url("fonts/fraunces-latin-wght-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root,
.ss-admin {
	/* Colour, light */
	--ss-bg: #F7F2E9;
	--ss-surface: #FFFDF8;
	--ss-sunken: #EEE6D6;
	--ss-text: #1F2A24;
	--ss-muted: #5A6259;
	--ss-accent: #B4390A;
	--ss-on-accent: #FFFFFF;
	--ss-brand: #1F3A2E;
	--ss-on-brand: #F7F2E9;
	--ss-link: #A8340A;
	--ss-border: #7D7868;          /* edge of controls, at least 3:1 */
	--ss-border-soft: #D9D0BE;     /* decoration only */
	--ss-focus: #1B5FD6;
	--ss-success: #1E6B3A;
	--ss-warning: #8A5A00;
	--ss-error: #B3261E;
	--ss-success-bg: #E6F2E8;
	--ss-warning-bg: #FBF0D5;
	--ss-error-bg: #FBE7E5;
	--ss-overlay: rgba(31, 42, 36, 0.55);

	/* Shape */
	--ss-radius-s: 6px;
	--ss-radius-m: 12px;
	--ss-radius-l: 20px;
	--ss-radius-pill: 999px;
	--ss-shadow-1: 0 1px 2px rgba(31, 42, 36, 0.08), 0 1px 1px rgba(31, 42, 36, 0.04);
	--ss-shadow-2: 0 4px 14px rgba(31, 42, 36, 0.10), 0 1px 3px rgba(31, 42, 36, 0.06);
	--ss-shadow-3: 0 16px 40px rgba(31, 42, 36, 0.18);

	/* Space, 4px steps */
	--ss-space-1: 0.25rem;
	--ss-space-2: 0.5rem;
	--ss-space-3: 0.75rem;
	--ss-space-4: 1rem;
	--ss-space-5: 1.5rem;
	--ss-space-6: 2rem;
	--ss-space-7: 3rem;
	--ss-space-8: 4.5rem;

	/* Type */
	--ss-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ss-font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--ss-text-xs: 0.8125rem;
	--ss-text-s: 0.9375rem;
	--ss-text-m: 1rem;
	--ss-text-l: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
	--ss-text-xl: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
	--ss-text-2xl: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem);
	--ss-text-3xl: clamp(2.125rem, 1.6rem + 2.8vw, 3.5rem);
	--ss-leading-tight: 1.15;
	--ss-leading-snug: 1.35;
	--ss-leading-body: 1.6;

	/* Motion */
	--ss-motion-fast: 120ms;
	--ss-motion-base: 200ms;
	--ss-ease: cubic-bezier(0.2, 0, 0, 1);

	/* Layers */
	--ss-z-sticky: 20;
	--ss-z-drawer: 40;
	--ss-z-modal: 60;
	--ss-z-toast: 80;

	/* Layout */
	--ss-content: 720px;
	--ss-wide: 1120px;
	--ss-touch: 44px;
	/* Breakpoints used in media queries: 480, 768, 1024, 1280 */

	color-scheme: light;
}

/* Colour, dark ("kaarslicht") */
:root[data-theme="dark"],
.ss-admin[data-theme="dark"] {
	--ss-bg: #14120F;
	--ss-surface: #1F1B16;
	--ss-sunken: #0D0B09;
	--ss-text: #F2E9D8;
	--ss-muted: #B5AB98;
	--ss-accent: #F2A04B;
	--ss-on-accent: #1A1007;
	--ss-brand: #8CC4A5;
	--ss-on-brand: #10201A;
	--ss-link: #F5B069;
	--ss-border: #8B8170;
	--ss-border-soft: #3A342B;
	--ss-focus: #8DB8FF;
	--ss-success: #7FD39B;
	--ss-warning: #F0C060;
	--ss-error: #FF8F86;
	--ss-success-bg: #14281B;
	--ss-warning-bg: #2C2410;
	--ss-error-bg: #33191A;
	--ss-overlay: rgba(0, 0, 0, 0.65);
	--ss-shadow-1: 0 0 0 1px rgba(242, 233, 216, 0.06);
	--ss-shadow-2: 0 6px 20px rgba(0, 0, 0, 0.45);
	--ss-shadow-3: 0 20px 48px rgba(0, 0, 0, 0.6);
	color-scheme: dark;
}

/* Admin without an explicit choice follows the system. */
@media (prefers-color-scheme: dark) {
	.ss-admin:not([data-theme="light"]) {
		--ss-bg: #14120F;
		--ss-surface: #1F1B16;
		--ss-sunken: #0D0B09;
		--ss-text: #F2E9D8;
		--ss-muted: #B5AB98;
		--ss-accent: #F2A04B;
		--ss-on-accent: #1A1007;
		--ss-brand: #8CC4A5;
		--ss-on-brand: #10201A;
		--ss-link: #F5B069;
		--ss-border: #8B8170;
		--ss-border-soft: #3A342B;
		--ss-focus: #8DB8FF;
		--ss-success: #7FD39B;
		--ss-warning: #F0C060;
		--ss-error: #FF8F86;
		--ss-success-bg: #14281B;
		--ss-warning-bg: #2C2410;
		--ss-error-bg: #33191A;
		--ss-overlay: rgba(0, 0, 0, 0.65);
		--ss-shadow-1: 0 0 0 1px rgba(242, 233, 216, 0.06);
		--ss-shadow-2: 0 6px 20px rgba(0, 0, 0, 0.45);
		--ss-shadow-3: 0 20px 48px rgba(0, 0, 0, 0.6);
		color-scheme: dark;
	}
}

/* The WordPress presets follow the same tokens, so core blocks and the plugin always agree. html:root beats the global styles of theme.json. */
html:root {
	--wp--preset--color--bg: var(--ss-bg);
	--wp--preset--color--surface: var(--ss-surface);
	--wp--preset--color--text: var(--ss-text);
	--wp--preset--color--muted: var(--ss-muted);
	--wp--preset--color--accent: var(--ss-accent);
	--wp--preset--color--on-accent: var(--ss-on-accent);
	--wp--preset--color--border: var(--ss-border);
	--wp--preset--color--focus: var(--ss-focus);
	--wp--preset--color--link: var(--ss-link);
}