/**
 * Design tokens. Loaded on the front end and in the block editor.
 * Brand colours can be overridden in Portfolio → Theme Settings → Colours.
 */

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

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

:root {
	/*
	 * Colours are not defined here. They are generated from the presets in
	 * inc/color-themes.php (Portfolio → Theme Settings → Appearance) for light and
	 * dark mode, and printed inline after this file. Use var(--color-*) everywhere:
	 * background, surface, heading, text, muted, border, border-strong, primary,
	 * primary-hover, on-primary, accent, accent-soft, focus, success, secondary,
	 * and --color-inverse-* for dark bands (applied by the .rp-inverse class).
	 */

	/* Type */
	--font-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--text-xs: 0.8125rem;
	--text-sm: 0.9375rem;
	--text-md: 1.0625rem;
	--text-lg: 1.25rem;
	--text-xl: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
	--text-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	--text-3xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
	--text-display: clamp(2.75rem, 1.5rem + 5.4vw, 6rem);
	--leading-tight: 1.05;
	--leading-snug: 1.25;
	--leading-body: 1.6;
	--tracking-tight: -0.025em;
	--tracking-display: -0.04em;

	/* Space */
	--space-2xs: 0.25rem;
	--space-xs: 0.5rem;
	--space-sm: 0.75rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;
	--space-3xl: clamp(3.5rem, 2.5rem + 4vw, 6rem);
	--space-section: clamp(3.5rem, 2rem + 5vw, 7rem);

	/* Layout */
	--container-width: 75rem;
	--prose-width: 42rem;
	--gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
	--header-height: 4.25rem;

	/* Shape */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 14px;
	--radius-pill: 999px;
	--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.08);
	--shadow-md: 0 1px 2px rgb(0 0 0 / 0.05), 0 8px 24px -8px rgb(0 0 0 / 0.16);

	/* Motion */
	--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
	--duration-fast: 150ms;
	--duration-base: 260ms;
	--duration-slow: 700ms;
}