/* =========================================================
   HERTSPARTNERS DESIGN TOKENS
   Source of truth: docs/DESIGN_SYSTEM.md (this repository).
   Every value here is either already proven correct in production
   (extracted from the previous database-only Additional CSS) or
   confirmed against the real branding assets — none invented.
   ========================================================= */

:root {
	/* Brand purple scale — #7C3AED is the proven production base */
	--hp-color-primary-900: #2E1065;
	--hp-color-primary-700: #6D28D9;
	/* Real bug found live (2026-08-22): --hp-color-primary-600 was used
	 * across ~30 rules in 5 stylesheets (directorist.css, homepage.css,
	 * directory-media.css, navigation.css, heartbeat.css) but never
	 * defined here -- an undefined custom property silently resolves to
	 * nothing rather than erroring, which is exactly why the storefront's
	 * "Claim listing" button rendered as invisible white-on-white (no
	 * background at all) on every single business page. Three of those
	 * ~30 call sites already carried an explicit `, #7c3aed` / `,
	 * var(--hp-color-primary-500)` fallback for this exact variable,
	 * confirming #7C3AED (this scale's own 500/base) was always the real
	 * intended value -- added as a genuine alias rather than rewriting
	 * every call site, so this fixes all of them at once with no risk to
	 * the already-correct, already-used -500 token itself. */
	--hp-color-primary-600: #7C3AED;
	--hp-color-primary-500: #7C3AED; /* base */
	--hp-color-primary-400: #8B5CF6;
	/* Same missing-token bug as -600 above, found in the same live audit:
	   fallback everywhere this is used is the literal hex of -200 below,
	   so this is a genuine alias, not a new colour. */
	--hp-color-primary-300: var(--hp-color-primary-200);
	--hp-color-primary-200: #C4B5FD;
	--hp-color-primary-100: #F5F0FF;
	/* Used only by the isolated .hp-trust-badge status pill, whose own
	   fallback values are blue/info-toned rather than brand-purple --
	   aliased to the existing info-* pair below instead of inventing a
	   third blue. */
	--hp-color-primary-050: var(--hp-color-info-bg);
	--hp-color-primary-800: var(--hp-color-info-text);
	--hp-color-link: #6D28D9;
	--hp-color-link-hover: #2E1065;

	/* Neutrals */
	--hp-color-ink: #111111;
	--hp-color-body: #555555;
	/* Aliases found missing in the same 2026-08-22 audit -- same "main
	   text" / "muted text" concepts as ink/body above, just a different
	   naming convention at the call site. */
	--hp-color-text: var(--hp-color-ink);
	--hp-color-text-muted: var(--hp-color-body);
	--hp-color-heading: var(--hp-color-ink);
	--hp-color-ink-muted: #6b7280;
	--hp-color-border: #ECECEC;
	--hp-color-border-strong: #E7E7E7;
	--hp-color-black: #000000;
	--hp-color-white: #FFFFFF;
	/* Generic UI-panel surfaces (2026-08-22 audit) -- distinct from the
	   page-level --hp-color-canvas below; own values matching every
	   existing call site's own consistent fallback. */
	--hp-color-surface: #f7f5ff;
	--hp-color-surface-muted: #f9fafb;

	/* Semantic status colours */
	--hp-color-info-bg: #DBEAFE;    --hp-color-info-text: #1E40AF;
	--hp-color-warning-bg: #FEF3C7; --hp-color-warning-text: #92400E;
	--hp-color-success-bg: #DCFCE7; --hp-color-success-text: #166534;
	--hp-color-danger-bg: #FEE2E2;  --hp-color-danger-text: #991B1B;
	/* dashboard.css's own numbered naming for the same 4 pairs above
	   (2026-08-22 audit) -- aliased rather than duplicated so the two
	   naming conventions can never drift apart. */
	--hp-color-success-100: var(--hp-color-success-bg);
	--hp-color-success-700: var(--hp-color-success-text);
	--hp-color-warning-100: var(--hp-color-warning-bg);
	--hp-color-warning-700: var(--hp-color-warning-text);
	--hp-color-danger-100: var(--hp-color-danger-bg);
	--hp-color-danger-700: var(--hp-color-danger-text);

	/* Masthead accent family (masthead consistency correction, 2026-08-06):
	   a small, approved set of muted, purple-compatible complementary
	   tints -- used ONLY for a masthead's decorative glow/ring/eyebrow-dot,
	   never as a dominant fill, so every masthead stays unmistakably
	   HertsPartners while still reading as a distinct "chapter". Chosen
	   deliberately desaturated/dark enough to avoid the bright, primary-hue
	   "template" look; each still passes on the light backgrounds these
	   accents are used against. */
	--hp-accent-gold: #B8901F;   /* opportunity (HertsJobs) -- confident, premium */
	--hp-accent-amber: #C2760A; /* reward (HertsOffers) -- warm, rewarding */
	--hp-accent-rose: #A8556E;  /* community (Volunteering) -- warm, human */
	--hp-accent-coral: #C05F3C; /* energetic (What's On / events) -- lively, local */
	--hp-accent-teal: #256B6C;  /* tools (Free Tools) -- practical, digital */
	--hp-accent-ink: #33308F;   /* editorial (Local Updates) -- structured, current */

	/* Typography */
	--hp-font-heading: 'Poppins', sans-serif;
	--hp-font-body: 'Inter', sans-serif;

	--hp-text-xs: 0.75rem;
	--hp-text-sm: 0.875rem;
	--hp-text-base: 1rem;
	--hp-text-lg: 1.125rem;
	--hp-text-xl: 1.5rem;
	--hp-text-2xl: 2rem;
	--hp-text-3xl: 2.75rem;
	/* Alias found missing in the 2026-08-22 audit -- exact 1rem match. */
	--hp-text-md: var(--hp-text-base);

	/* Spacing */
	--hp-space-1: 0.25rem;
	--hp-space-2: 0.5rem;
	--hp-space-3: 0.75rem;
	--hp-space-4: 1rem;
	--hp-space-5: 1.25rem;
	--hp-space-6: 1.5rem;
	--hp-space-7: 1.75rem;
	--hp-space-8: 2rem;
	--hp-space-12: 3rem;

	/* Radii */
	--hp-radius-sm: 8px;
	--hp-radius-md: 14px;
	--hp-radius-lg: 20px;
	--hp-radius-xl: 22px;
	--hp-radius-pill: 999px;

	/* Shadows */
	--hp-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.04);
	--hp-shadow-card-hover: 0 18px 40px rgba(0, 0, 0, 0.08);
	/* A lighter tier below -card, found missing in the 2026-08-22 audit
	   (no fallback existed anywhere, so this had been rendering with no
	   shadow at all). */
	--hp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);

	/* Motion */
	--hp-transition-base: 0.2s ease;
	--hp-transition-card: 0.25s ease;

	/* Page shell (masthead consistency correction, 2026-08-06): the ONE
	   canonical outer container width/gutter every page introduction and
	   its following content must share. Previously three near-identical
	   width rules existed (.hp-product-page .site-main, .hp-content-surface,
	   plus Directory's masthead having no wrapper at all and Free Tools
	   having its own arbitrary 900px) -- this is the single source of truth
	   they now all reference, so nothing can drift again independently. */
	--hp-shell-max-width: 1180px;
	--hp-shell-gutter: 16px;
	--hp-shell-gutter-mobile: 12px;
	/* Alias found missing in the 2026-08-22 audit -- exact 1180px match. */
	--hp-content-wide: var(--hp-shell-max-width);

	/* Global canvas (design-system consolidation, 2026-08-06): large areas of
	   pure white read as unfinished on public discovery pages. A soft,
	   barely-noticed off-white/purple-tinted base, felt rather than
	   consciously seen -- working surfaces (cards, panels, forms) stay
	   --hp-color-white on top of it for real contrast. Account/dashboard/
	   form routes intentionally keep the plainer --hp-color-white canvas
	   (see .hp-utility-page below) -- calmer, not "unfinished". */
	--hp-color-canvas: #FBFAFE;
	--hp-color-canvas-wash: radial-gradient( circle at 15% 0%, rgba( 124, 58, 237, 0.05 ), transparent 45% ),
		radial-gradient( circle at 100% 30%, rgba( 124, 58, 237, 0.035 ), transparent 40% );

	/* Canonical card family (design-system consolidation, 2026-08-06): every
	   new/rebuilt card (Free Tools grid, What's On event cards, onward-
	   journey tiles) references these instead of inventing its own radius/
	   border/padding/shadow -- existing cards retrofit onto this token set
	   over time rather than in one uncontrolled pass. */
	--hp-card-radius: var( --hp-radius-lg );
	--hp-card-border: 1px solid var( --hp-color-border );
	--hp-card-padding: var( --hp-space-6 );
	--hp-card-shadow: var( --hp-shadow-card );
	--hp-card-shadow-hover: var( --hp-shadow-card-hover );
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--hp-transition-base: 0s;
		--hp-transition-card: 0s;
	}
}