/*
 * Design Tokens
 * Color values below are the exact QEHS Vault Figma palette (provided
 * directly, not sampled/approximated). Spacing, radius, shadow,
 * typography, and layout tokens are unchanged placeholders pending
 * their own Figma values.
 */

:root {
	/* Colors — core palette */
	--qehs-primary: #021E40;
	--qehs-primary-dark: #011631;
	--qehs-secondary: #7EAE30;
	--qehs-text: #000000;
	--qehs-text-muted: #707070;
	--qehs-background: #FFFFFF;
	--qehs-background-alt: #FBFCFD;
	--qehs-border: #E8E8E8;
	--qehs-success: #5E9128;
	--qehs-warning: #FFBB1E;
	--qehs-error: #C62828;

	/*
	 * Colors — supporting accent palette (category icons, badges, tags).
	 * Each accent has a strong color and a light "tint" background.
	 *
	 * NOTE: the supplied "Green" (#5E9128), "Yellow" (#FFBB1E), and "Red"
	 * (#C62828) accent colors are identical to --qehs-success,
	 * --qehs-warning, and --qehs-error above, so no separate accent-green/
	 * accent-yellow/accent-red tokens were added (that would duplicate an
	 * existing token under a second name). Only their tint companions —
	 * which didn't exist yet — are added below, meant to pair with the
	 * existing success/warning/error tokens.
	 */
	--qehs-success-tint: #DAF0E2;
	--qehs-warning-tint: #FFF1D0;
	--qehs-error-tint: #FFE3E3;

	--qehs-accent-blue: #1658AF;
	--qehs-accent-blue-tint: #D9E9FD;
	--qehs-accent-orange: #F98613;
	--qehs-accent-orange-tint: #FEEDDB;
	--qehs-accent-teal: #00695C;
	--qehs-accent-teal-tint: #ECFFFD;
	--qehs-accent-blue-alt: #1976D2;
	--qehs-accent-blue-alt-tint: #E8F3FF;
	--qehs-accent-purple: #6A1B9A;
	--qehs-accent-purple-tint: #F7EBFF;
	--qehs-accent-slate-blue: #4A6FA5;
	--qehs-accent-slate-blue-tint: #D8E2EF;

	/* Typography */
	--qehs-font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--qehs-font-size-base: 16px;
	--qehs-line-height-base: 1.5;

	/* Spacing scale */
	--qehs-space-xs: 4px;
	--qehs-space-sm: 8px;
	--qehs-space-md: 16px;
	--qehs-space-lg: 24px;
	--qehs-space-xl: 40px;
	--qehs-space-2xl: 64px;

	/* Radius */
	--qehs-radius-sm: 4px;
	--qehs-radius-md: 8px;
	--qehs-radius-lg: 16px;

	/* Shadows */
	--qehs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
	--qehs-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);

	/* Layout */
	/* Shared page-content width, used by the footer today and by
	   homepage sections once built. Set to the Figma frame width
	   (1440px) — NOT the 1248px usable-content figure. Because
	   box-sizing: border-box is global (reset.css), max-width caps the
	   TOTAL box (content + padding), so padding-inline must be carved
	   out of this value rather than added beyond it: 1440 - 96 - 96 =
	   1248px of actual usable content, matching Figma exactly. Setting
	   this to 1248 directly (as before) over-constrained the total box,
	   leaving only ~1065px of real content plus an unwanted extra
	   centering margin on viewports between 1248px and 1440px. */
	--qehs-container-max: 1440px;
	/*
	 * Responsive horizontal padding for --qehs-container-max content.
	 * Resolves to exactly 96px at the Figma desktop design width
	 * (1440px) and scales fluidly on narrower viewports via clamp(),
	 * rather than a single hardcoded value:
	 *   - floor:   var(--qehs-space-md) (16px) — reuses the existing
	 *              spacing scale rather than inventing a new number.
	 *   - fluid:   6.67vw — 6.67% of viewport width; chosen so that
	 *              6.67vw == 96px exactly at a 1440px viewport
	 *              (96 / 1440 * 100 = 6.667).
	 *   - ceiling: 96px — the Figma value; viewports wider than 1440px
	 *              stay pinned at 96px rather than continuing to grow.
	 */
	--qehs-container-padding: clamp(var(--qehs-space-md), 6.67vw, 96px);
	/* Values below measured directly from the reference image (1440px
	   wide) via pixel analysis, not estimated. */
	--qehs-header-height: 84px;
	--qehs-header-logo-height: 36px;
	/* Matches the reference's own 1440px design width — content sits
	   edge-to-edge with padding at that width, and centers (rather than
	   continuing to stretch) on wider screens. Scoped to the header only;
	   does not affect product/homepage grids. */
	--qehs-header-container-max: 1440px;
	--qehs-nav-text-color: #707070;
}