/*
 * Design tokens. This is the only file that contains raw colour, spacing, type, radius and
 * shadow values; every other stylesheet reads them through custom properties.
 *
 * Branding: /brand/theme.css (generated from the business profile) overrides --brand-primary
 * and --brand-accent. Nothing else in the system is client-specific.
 *
 * Breakpoints (custom properties cannot be used in media queries, so they are written out):
 *   narrow  40em  (640px)    tablet  48em (768px)    wide  64em (1024px)    full  80em (1280px)
 */
@layer tokens, base, components, site, app;

@font-face {
	font-family: "Schibsted Grotesk";
	src: url("/fonts/schibsted-grotesk-latin-wght.woff2") format("woff2");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}

@layer tokens {
	:root {
		/* Brand: replaced at runtime by /brand/theme.css */
		--brand-primary: #1f5c7a;
		--brand-accent: #e8c547;

		/* Derived from the brand so any valid colour produces a usable scale */
		--primary: var(--brand-primary);
		--primary-strong: color-mix(in oklab, var(--brand-primary) 82%, black);
		--primary-soft: color-mix(in oklab, var(--brand-primary) 10%, var(--surface));
		--on-primary: #ffffff;
		--accent: var(--brand-accent);
		--on-accent: #1b2a33;

		/* Surfaces and text (light) */
		--page: #f4f5f2;
		--surface: #ffffff;
		--surface-sunken: #ebede8;
		--ink: #17242b;
		--ink-muted: #4d5d65;
		--ink-faint: #6b7a82;
		--rule: #d3d9d4;
		--rule-strong: #aeb8b2;
		--link: var(--primary-strong);

		/* Status */
		--ok: #25704a;
		--ok-soft: #e1f1e8;
		--warn: #8a5a00;
		--warn-soft: #fbefcf;
		--danger: #b3382c;
		--danger-soft: #fbe5e1;
		--info: var(--primary-strong);
		--info-soft: var(--primary-soft);

		/* Sidebar (always dark so the brand colour reads the same in both themes) */
		--side-bg: #14212a;
		--side-ink: #dce5e9;
		--side-ink-muted: #93a4ad;
		--side-active: color-mix(in oklab, var(--brand-primary) 55%, #14212a);

		/* Typography */
		--font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
		--fs-xs: 0.8125rem;
		--fs-sm: 0.9375rem;
		--fs-base: 1.0625rem;
		--fs-md: 1.25rem;
		--fs-lg: 1.5rem;
		--fs-xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
		--fs-2xl: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
		--lh-tight: 1.1;
		--lh-snug: 1.3;
		--lh-body: 1.55;
		--measure: 62ch;

		/* Spacing (4px base) */
		--s-1: 0.25rem;
		--s-2: 0.5rem;
		--s-3: 0.75rem;
		--s-4: 1rem;
		--s-5: 1.5rem;
		--s-6: 2rem;
		--s-7: 3rem;
		--s-8: 4.5rem;
		--s-9: 6.5rem;

		/* Radii: different roles, different corners */
		--r-control: 6px;
		--r-panel: 12px;
		--r-pill: 999px;

		/* Shadows: used for things that float, not for things that sit */
		--shadow-float: 0 8px 24px rgb(15 30 40 / 0.14), 0 2px 6px rgb(15 30 40 / 0.08);
		--shadow-lift: 0 1px 2px rgb(15 30 40 / 0.1);

		--focus: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary);
		--sidebar-w: 15.5rem;
		--container: 72rem;
		color-scheme: light;
	}

	:root[data-theme="dark"] {
		--page: #10181d;
		--surface: #18242b;
		--surface-sunken: #121c22;
		--ink: #e8eef1;
		--ink-muted: #b0bec5;
		--ink-faint: #8b9ba3;
		--rule: #2c3b44;
		--rule-strong: #455762;
		--link: color-mix(in oklab, var(--brand-primary) 45%, white);
		--primary-soft: color-mix(in oklab, var(--brand-primary) 24%, var(--surface));
		--ok: #6fcf9c;
		--ok-soft: #173a29;
		--warn: #f0c46a;
		--warn-soft: #3d2f10;
		--danger: #ff8f82;
		--danger-soft: #45201c;
		--info: var(--link);
		--focus: 0 0 0 3px var(--surface), 0 0 0 5px color-mix(in oklab, var(--brand-primary) 40%, white);
		--shadow-float: 0 8px 24px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.4);
		color-scheme: dark;
	}

	@media (prefers-color-scheme: dark) {
		:root:not([data-theme="light"]) {
			--page: #10181d;
			--surface: #18242b;
			--surface-sunken: #121c22;
			--ink: #e8eef1;
			--ink-muted: #b0bec5;
			--ink-faint: #8b9ba3;
			--rule: #2c3b44;
			--rule-strong: #455762;
			--link: color-mix(in oklab, var(--brand-primary) 45%, white);
			--primary-soft: color-mix(in oklab, var(--brand-primary) 24%, var(--surface));
			--ok: #6fcf9c;
			--ok-soft: #173a29;
			--warn: #f0c46a;
			--warn-soft: #3d2f10;
			--danger: #ff8f82;
			--danger-soft: #45201c;
			--info: var(--link);
			--focus: 0 0 0 3px var(--surface), 0 0 0 5px color-mix(in oklab, var(--brand-primary) 40%, white);
			--shadow-float: 0 8px 24px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.4);
			color-scheme: dark;
		}
	}
}