/**
 * Buy Private Plates - design tokens
 *
 * One source of truth for every design decision. The palette is shared
 * with the Woo DVLA Private Plates plugin (cart/checkout/product use the
 * --bpp-* family) so plugin-rendered screens and theme-rendered screens
 * read as one product. Plate yellow is reserved for the registration
 * chip motif only - it is never used as general UI chrome.
 */
:root {
	/* Brand */
	--bp-ink: #0f1235;          /* topbar, footer, darkest navy */
	--bp-navy: #1a1f4e;         /* hero bands, headings on light */
	--bp-navy-soft: #232a63;    /* hover state on navy */
	--bp-royal: #3b5bdb;        /* links, interactive, focus */
	--bp-royal-deep: #2c46b8;   /* link hover */
	--bp-royal-soft: #eef1ff;   /* tinted backgrounds, badges */
	--bp-red: #d9342b;          /* primary CTA (search) */
	--bp-red-deep: #b8251d;

	/* Plate motif only */
	--bp-plate-yellow: #ffc72c;
	--bp-plate-yellow-deep: #e6ac00;
	--bp-plate-ink: #101318;

	/* Neutrals */
	--bp-white: #ffffff;
	--bp-canvas: #f6f7fb;       /* page background behind cards */
	--bp-border: #e3e6ef;
	--bp-border-strong: #c9cede;
	--bp-text: #1e2749;
	--bp-text-soft: #47506e;
	--bp-muted: #667085;
	--bp-muted-on-navy: #9ca3b8;
	--bp-faint-on-navy: #6b7599;

	/* States */
	--bp-success: #16a34a;
	--bp-success-soft: #f0fdf4;
	--bp-warning: #b45309;
	--bp-warning-soft: #fffbeb;
	--bp-danger: #dc2626;
	--bp-danger-soft: #fef2f2;

	/* Type - Poppins matches the plugin and the existing brand */
	--bp-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI',
		Roboto, 'Helvetica Neue', Arial, sans-serif;
	--bp-font-plate: 'CharlesWright', 'Arial Black', 'Arial Narrow Bold',
		sans-serif; /* plate chip; falls back gracefully if font absent */

	--bp-text-xs: 0.75rem;      /* 12px */
	--bp-text-sm: 0.875rem;     /* 14px */
	--bp-text-base: 1rem;       /* 16px */
	--bp-text-lg: 1.125rem;     /* 18px */
	--bp-text-xl: 1.375rem;     /* 22px */
	--bp-text-2xl: 1.75rem;     /* 28px */
	--bp-text-3xl: 2.375rem;    /* 38px */
	--bp-text-4xl: 3rem;        /* 48px */

	--bp-leading-tight: 1.25;
	--bp-leading-normal: 1.6;
	--bp-leading-loose: 1.85;

	/* Space scale */
	--bp-s1: 4px;
	--bp-s2: 8px;
	--bp-s3: 12px;
	--bp-s4: 16px;
	--bp-s5: 24px;
	--bp-s6: 32px;
	--bp-s7: 48px;
	--bp-s8: 64px;
	--bp-s9: 96px;

	/* Radius + elevation - matches the plugin's 14px card language */
	--bp-radius-sm: 8px;
	--bp-radius: 14px;
	--bp-radius-lg: 16px;
	--bp-radius-pill: 999px;
	--bp-shadow-card: 0 4px 20px rgba(15, 18, 53, 0.06);
	--bp-shadow-card-hover: 0 10px 32px rgba(15, 18, 53, 0.12);
	--bp-shadow-dropdown: 0 8px 30px rgba(15, 18, 53, 0.14);

	/* Layout */
	--bp-container: 1300px;
	--bp-container-narrow: 780px;
	--bp-header-h: 88px;
	--bp-topbar-h: 34px;

	/* Motion */
	--bp-ease: cubic-bezier(0.22, 0.7, 0.35, 1);
	--bp-fast: 150ms;
	--bp-med: 260ms;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--bp-fast: 1ms;
		--bp-med: 1ms;
	}
}