/*
 * The DEV Point — design tokens.
 * Reusable CSS custom properties for the premium redesign.
 */

:root {
	/* Brand colours */
	--tdp-primary: #007bc7; /* was #008fe8 — darkened for WCAG AA 4.5:1 text contrast (axe-core color-contrast fix) */
	--tdp-secondary: #0070d0; /* was #0073d5 — darkened for WCAG AA 4.5:1 text contrast (axe-core color-contrast fix) */
	--tdp-highlight: #00a1f1;
	/* Text-safe variant for the gradient-clipped hero headline only — the
	   base --tdp-highlight is also used as light-on-dark text/icon color in
	   .tdp-section-navy and .tdp-utility-login, where darkening it would
	   reduce (already-ample) contrast for no reason. Scoped separately per
	   axe-core Phase 2 gradient-contrast fix — 3.55:1 vs #ffffff at the
	   gradient's lighter end (large text, needs 3:1). */
	--tdp-highlight-on-light: #008fd8;
	--tdp-navy: #071b3d;
	--tdp-heading: #0b1220;
	--tdp-text: #1f2937;
	--tdp-muted: #627288; /* was #64748b — darkened for WCAG AA 4.5:1 text contrast (axe-core color-contrast fix) */
	--tdp-pale-blue: #eaf6ff;
	--tdp-soft-blue: #ddf2fc;
	--tdp-light-grey: #f5f7fa;
	--tdp-border: #e2e8f0;
	--tdp-white: #ffffff;

	/* Neutral chrome (a lighter divider tone than --tdp-border, used for
	   subtle internal separators — intentionally not brand-coloured) */
	--tdp-border-light: #eef1f5;
	--tdp-shadow-color: 220 25% 20%;

	/* Typography */
	--tdp-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--tdp-font-body: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);

	/* Layout */
	--tdp-container: 1240px;
	--tdp-container-narrow: 768px;
	--tdp-radius-sm: 0.5rem;
	--tdp-radius: 1.1rem;
	--tdp-radius-lg: 1.75rem;
	--tdp-radius-full: 999px;

	/* Section rhythm (desktop / tablet / mobile) */
	--tdp-space-section: 6.5rem;      /* ~104px desktop, within the 96-120px range */
	--tdp-space-section-tablet: 5rem;  /* 80px */
	--tdp-space-section-mobile: 4rem;  /* 64px */

	/* Motion */
	--tdp-transition: 200ms ease;
	--tdp-transition-slow: 400ms ease;

	/* Shadows */
	--tdp-shadow-sm: 0 1px 2px hsl(var(--tdp-shadow-color) / 0.08);
	--tdp-shadow-md: 0 8px 24px hsl(var(--tdp-shadow-color) / 0.12);
	--tdp-shadow-lg: 0 24px 55px hsl(var(--tdp-shadow-color) / 0.18);
}