/*
 * Design tokens for iZurch. Generated from design.plan in site-spec.json.
 * The only file allowed to contain colour values.
 * Brand colours were sampled from the old homepage and confirmed from izurch.co.uk CSS.
 */
@font-face {
	font-family: "Exo 2";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/exo-2-latin-800-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Exo 2";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/exo-2-latin-700-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
}

:root {
	/* Brand colours (exact). Decoration, glows and large surfaces. Never under body text. */
	--brand-magenta: #e72f75;
	--brand-coral: #e9454b;
	--brand-yellow: #fbba00;
	--brand-teal: #13b8c2;
	--brand-purple: #964499;
	--brand-blue: #7099d1;

	/* Accessible shades: these carry text and controls */
	--c-action-a: #e21a66; /* white on it 4.59:1 */
	--c-action-b: #e5272e; /* white on it 4.51:1 */
	--c-link: #c4125a; /* on white 5.86:1, on tint 5.2:1 */
	--c-link-hover: #9f0e49;

	--c-bg: #ffffff;
	--c-surface: #fdf2f6;
	--c-text: #232323;
	--c-muted: #525252;
	--c-line: #f0d3df;
	--c-primary: var(--c-action-a);
	--c-primary-hover: var(--c-link);
	--c-on-primary: #ffffff;
	--c-accent: var(--brand-purple);
	--c-focus: var(--brand-purple);
	--c-success: #0b6b2f;
	--c-error: #b3261e;
	--c-skeleton: #f0d3df;

	/* Dark plum bands, derived from the brand purple */
	--c-plum: #2a0f2f;
	--c-plum-2: #3a1a40;
	--c-on-dark: #ffffff;
	--c-on-dark-muted: #e3cfe6;
	--c-line-dark: #5a3562;
	--c-focus-on-dark: #ffffff;
	--c-dark-text: #232323;

	/* Compatibility names used by the shared base layer */
	--c-ink-bg: var(--c-plum);
	--c-ink-2: var(--c-plum-2);
	--c-on-ink: var(--c-on-dark);
	--c-on-ink-muted: var(--c-on-dark-muted);
	--c-ink-line: var(--c-line-dark);
	--c-focus-on-ink: var(--c-focus-on-dark);

	--c-placeholder-bg: #fff8e1;
	--c-placeholder-line: #c79100;
	--c-placeholder-text: #5c4300;

	/* 3D scene colours (read by assets/js/main.js) */
	--scene-key: #fff4e0;
	--scene-rim-a: var(--brand-magenta);
	--scene-rim-b: var(--brand-teal);
	--scene-fill: #ffffff;
	--scene-ground: var(--brand-purple);
	--scene-star: var(--brand-yellow);

	/* Gradients */
	--grad-brand: linear-gradient(120deg, var(--c-action-a) 0%, var(--c-action-b) 100%);
	--grad-hero:
		radial-gradient(46rem 30rem at 80% 30%, color-mix(in srgb, var(--brand-magenta) 70%, transparent), transparent 70%),
		radial-gradient(40rem 26rem at 8% 100%, color-mix(in srgb, var(--brand-purple) 55%, transparent), transparent 70%),
		var(--grad-brand);
	--grad-plum:
		radial-gradient(40rem 26rem at 90% 0%, color-mix(in srgb, var(--brand-purple) 60%, transparent), transparent 70%),
		radial-gradient(30rem 22rem at 0% 100%, color-mix(in srgb, var(--brand-magenta) 28%, transparent), transparent 70%),
		var(--c-plum);

	/* Type */
	--font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-display: "Exo 2", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--fw-regular: 400;
	--fw-bold: 700;
	--fw-display: 800;
	--lh-body: 1.6;
	--lh-tight: 1.05;
	--step--1: clamp(0.85rem, 0.82rem + 0.15vw, 0.92rem);
	--step-0: clamp(1.05rem, 1rem + 0.2vw, 1.15rem);
	--step-1: clamp(1.25rem, 1.15rem + 0.4vw, 1.45rem);
	--step-2: clamp(1.5rem, 1.35rem + 0.7vw, 1.9rem);
	--step-3: clamp(1.8rem, 1.55rem + 1.1vw, 2.5rem);
	--step-4: clamp(2.2rem, 1.8rem + 1.9vw, 3.4rem);
	--step-5: clamp(2.7rem, 1.9rem + 3.6vw, 5rem);

	/* Space */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4.5rem;
	--space-9: 6.5rem;

	/* Shape and layout */
	--radius-s: 8px;
	--radius-m: 16px;
	--radius-l: 999px;
	--radius-card: 24px;
	--container: 76rem;
	--measure: 65ch;
	--shadow-1: 0 1px 2px color-mix(in srgb, var(--c-plum) 16%, transparent);
	--shadow-2: 0 24px 50px -24px color-mix(in srgb, var(--c-action-a) 60%, transparent);
	--shadow-3: 0 40px 80px -30px color-mix(in srgb, var(--c-plum) 75%, transparent);
	--glow: 0 0 0 1px color-mix(in srgb, var(--c-on-dark) 18%, transparent), 0 30px 70px -20px color-mix(in srgb, var(--brand-magenta) 70%, transparent);
	--cut: clamp(1.75rem, 5.5vw, 5.5rem);
	--ribbon-speed: 46s;
	--font-hero: clamp(2.6rem, 1rem + 4.2vw, 4.7rem);
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--dur: 0.7s;
}