/*
 * Design tokens for pps-environmental.com.
 *
 * The design handoff's own component library (`_ds/pps-environmental-design-system-.../tokens/*.css`)
 * was referenced by every mockup page but NOT included in the handoff zip — only the rendered
 * .dc.html pages and raw assets were provided. These values are reconstructed from (a) the PPS
 * brand palette already in use elsewhere on pps-api.co.uk projects, and (b) every var(--...) usage
 * actually found across the mockup pages, so the variable names here match the mockups exactly.
 * If the client can supply the real tokens/*.css files later, swap the values in this file only —
 * every template consumes these variables, not raw hex/px.
 */

:root {
	/* Brand ramp */
	--pps-deep: #3D1E6D;
	--pps-mid: #6B3FA0;
	--pps-lav: #9B7FC4;
	--pps-pale: #B8A4D9;
	--pps-tint: #F4EFFA;
	--pps-charcoal: #222222;
	--pps-grey-1: #6B7280;
	--pps-grey-2: #E5E7EB;
	--pps-bg: #FAF9FB;

	/* Semantic colour */
	--color-primary: var(--pps-deep);
	--color-accent: var(--pps-mid);
	--color-text: var(--pps-charcoal);
	--color-text-secondary: var(--pps-grey-1);
	--color-text-on-primary: #FFFFFF;
	--color-bg: var(--pps-bg);
	--color-surface: #FFFFFF;
	--color-surface-tint: var(--pps-tint);
	--color-border: var(--pps-grey-2);
	--color-link: var(--pps-mid);
	--color-link-hover: var(--pps-deep);
	--color-success: #1B8A5A;
	--color-warning: #B45309;
	--color-danger: #C0152F;

	/* Typography */
	--font-display: 'Literata', Georgia, 'Times New Roman', serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--ls-wordmark: -0.01em;
	--ls-eyebrow: 0.08em;
	--lh-tight: 1.15;
	--lh-body: 1.6;

	--fs-caption: 0.75rem;
	--fs-body-sm: 0.875rem;
	--fs-body: 1rem;
	--fs-body-lg: 1.125rem;
	--fs-eyebrow: 0.8125rem;
	--fs-h3: 1.25rem;
	--fs-h2: 1.75rem;
	--fs-h1: 2.25rem;
	--fs-display: 3rem;

	/* Spacing — 4px scale, --space-1 .. --space-24 */
	--space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
	--space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
	--space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

	/* Radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-pill: 999px;

	/* Shadow — soft, purple-tinted */
	--shadow-sm: 0 1px 2px rgba(61, 30, 109, 0.06);
	--shadow-md: 0 4px 12px rgba(61, 30, 109, 0.08);
	--shadow-lg: 0 12px 32px rgba(61, 30, 109, 0.12);
}