/*
 * WCP 2026 - design tokens (v2 refresh, 2026-09)
 * ---------------------------------------------------------------------------
 * The single source of truth for colour, spacing, radius, shadow and type.
 * Every rule in main.css and every template must consume these variables;
 * no raw hex values anywhere else in the theme.
 *
 * Colour modes: light lives on :root, dark on [data-theme="dark"].
 * Only the tokens that actually change are redeclared in the dark block, so
 * anything not listed there deliberately inherits its light value.
 *
 * Per-install brand overrides (wp-content/wcp-company.php, `brand` key) are
 * injected after this file by wcp_brand_css_override() in inc/setup.php and
 * may replace: primary, primary_hover, accent, accent_hover, navy, ink,
 * ink_2, heading, hero_grad_a, hero_grad_b. Light mode only.
 *
 * Note: system colour-scheme preference is intentionally NOT wired up here.
 * The theme toggle owns the data-theme attribute; auto-applying dark from
 * prefers-color-scheme would fight that control.
 */

/* --------------------------------------------------------------------------
 * Type - self-hosted, OFL, Latin subsets, one variable file per family.
 *   Archivo      400-800  headings, display, card titles
 *   Public Sans  400-700  body, UI, navigation
 * ----------------------------------------------------------------------- */

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/archivo-var.woff2') format('woff2');
}

@font-face {
	font-family: 'Public Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/public-sans-var.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
 * Light mode (default)
 * ----------------------------------------------------------------------- */

:root {
	/* Brand */
	--c-primary: #087BCC;
	--c-primary-hover: #065E9B;
	--c-accent: #14B2E1;
	--c-accent-hover: #0EA6D4;
	--c-navy: #003C6F;

	/* Ink - the ground the hero, trust strip, CTA card and footer sit on.
	   Defaults are the West Coast (FL) navy and mid-blue - the same pair the
	   old hero gradient used, so FL reads as its familiar brighter blue. The
	   SC install overrides these to a deeper navy in its wcp-company.php. */
	--c-ink: #003C6F;
	--c-ink-2: #065E9B;
	--c-on-ink: #FFFFFF;
	--c-on-ink-muted: rgba(255, 255, 255, 0.74);
	--c-on-ink-border: rgba(255, 255, 255, 0.16);

	/* Surfaces + ink */
	--c-bg: #FFFFFF;
	--c-surface: #F5F8FB;
	--c-surface-2: #EBF1F7;
	--c-text: #16212B;
	--c-text-muted: #5A6B7B;
	--c-heading: #003C6F;
	--c-border: #E1E7EE;
	--c-border-strong: #C7D2DE;

	/* Eyebrow / kicker text. primary-hover is AA on white for both installs;
	   the light accents are not, which is why this is not --c-accent. */
	--c-eyebrow: var(--c-primary-hover);

	/* Hero: the canvas (assets/js/hero-canvas.js) reads these two for its
	   water tints; the hero ground itself is --c-ink. */
	--c-hero-grad-a: #003C6F;
	--c-hero-grad-b: #065E9B;

	/* Radius */
	--radius-lg: 14px;
	--radius: 8px;
	--radius-sm: 6px;

	/* Elevation - tinted with the ink colour rather than pure black. Rest
	   state is flat; shadows appear on hover, dropdowns and the CTA card. */
	--shadow-1: 0 1px 2px rgba(10, 34, 64, 0.06), 0 4px 12px rgba(10, 34, 64, 0.06);
	--shadow-2: 0 8px 24px rgba(10, 34, 64, 0.12), 0 20px 48px rgba(10, 34, 64, 0.12);

	/* Spacing scale */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 32px;
	--space-6: 48px;
	--space-7: 64px;
	--space-8: 96px;
	--space-9: 128px;

	/* Type + layout */
	--font-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-display: 'Archivo', 'Public Sans', system-ui, sans-serif;
	--tracking-tight: -0.02em;
	--tracking-eyebrow: 0.12em;
	--container: 1200px;
	--measure: 46rem;
}

/* --------------------------------------------------------------------------
 * Dark mode
 * ----------------------------------------------------------------------- */

[data-theme="dark"] {
	/* Primary is lifted so it stays legible on a dark ground; hover lifts
	   further (dark mode brightens on hover instead of darkening). Accent is
	   unchanged - it already reads at 7.36:1 on the dark background. */
	--c-primary: #2E9BE6;
	--c-primary-hover: #4DAAEA;

	--c-ink: #060F1B;
	--c-ink-2: #0C1D33;
	--c-on-ink-muted: rgba(232, 240, 247, 0.72);
	--c-on-ink-border: rgba(232, 240, 247, 0.14);

	--c-bg: #0B1622;
	--c-surface: #111F30;
	--c-surface-2: #172A40;
	--c-text: #E8F0F7;
	--c-text-muted: #A3B4C6;
	--c-heading: #F2F6FA;
	--c-border: #223650;
	--c-border-strong: #33506F;
	--c-eyebrow: var(--c-accent);

	--c-hero-grad-a: #060F1B;
	--c-hero-grad-b: #0C1D33;

	/* Shadows need more opacity to register against a dark ground. */
	--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.32);
	--shadow-2: 0 8px 24px rgba(0, 0, 0, 0.46), 0 20px 48px rgba(0, 0, 0, 0.52);
}