:root {
	/* ============================================================
	 * FOUNDATION — Primitive, scale-based tokens.
	 * Change values here to re-skin the entire site in one place.
	 * Semantic tokens (below) and skin palette files consume these.
	 * ============================================================ */

	/* Foundation — Font family */
	--font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-family-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--site-font-family-sans: var(--font-family-sans);
	--site-font-family-heading: var(--font-family-heading);

	/* Foundation — Colors (primitives) */
	--site-color-white: #fff;
	--site-color-gray-050: #fafafa;
	--site-color-gray-100: #f4f4f4;
	--site-color-gray-200: #e6e6e6;
	--site-color-gray-300: #e5e5e5;
	--site-color-gray-350: #e0e0e0;
	--site-color-gray-400: #cacaca;
	--site-color-gray-500: #c6c6c6;
	--site-color-gray-550: #838383;
	--site-color-gray-600: #a8a8a8;
	--site-color-gray-650: #646464;
	--site-color-gray-700: #8d8d8d;
	--site-color-gray-800: #6f6f6f;
	--site-color-gray-850: #525252;
	--site-color-gray-900: #393939;
	--site-color-black: #161616;
	--site-color-ink: #202020;
	--site-color-danger: #da1e28;
	--site-color-brand-blue: #003cb4;
	--site-color-blue-500: #0f62fe;
	--site-color-blue-600: #0354e9;
	--site-color-blue-800: #002d9c;
	--site-color-navy-700: #001d6c;
	--site-color-footer-navy: #0a1f3a;
	--site-color-slate-700: #242e3f;
	--site-color-border-disabled: #ddd;

	/* Foundation — Spacing (8px grid, semantic scale).
	 * Prefer these names in new code. */
	--site-space-0: 0;
	--site-space-xs: 0.25rem;       /* 4px  */
	--site-space-sm: 0.5rem;        /* 8px  */
	--site-space-md: 1rem;          /* 16px */
	--site-space-lg: 1.5rem;        /* 24px */
	--site-space-xl: 2rem;          /* 32px */
	--site-space-2xl: 3rem;         /* 48px */
	--site-space-3xl: 4rem;         /* 64px */

	/* Legacy numeric spacing aliases — kept so existing selectors keep working. */
	--site-space-1: 0.125rem;       /* 2px  */
	--site-space-2: 0.25rem;        /* 4px  — equivalent to --site-space-xs */
	--site-space-3: 0.5rem;         /* 8px  — equivalent to --site-space-sm */
	--site-space-4: 0.75rem;        /* 12px */
	--site-space-5: 1rem;           /* 16px — equivalent to --site-space-md */
	--site-space-6: 1.125rem;       /* 18px */
	--site-space-8: 2rem;           /* 32px — equivalent to --site-space-xl */
	--site-space-10: 2.5rem;        /* 40px */
	--site-space-12: 3rem;          /* 48px — equivalent to --site-space-2xl */
	--site-space-15: var(--site-space-lg);   /* LEGACY 15px → 24px (--site-space-lg) */
	--site-space-24: var(--site-space-lg);   /* LEGACY 24px → 24px (--site-space-lg) */

	/* Foundation — Sizing */
	--site-size-navbar-height: 63px;
	--site-size-navbar-frame-offset: 2px;
	--site-size-nav-arrow: 3rem;
	--site-container-max-width: 1320px;

	/* Semantic — Navbar link */
	--site-nav-link-color: var(--site-color-gray-650);
	--site-nav-link-weight: var(--site-font-weight-medium);
	--site-nav-link-padding-x: var(--site-space-lg);
	--site-nav-link-hover-bg: rgba(0, 0, 0, 0.04);
	--site-nav-cta-bg: var(--site-color-ink);
	--site-nav-cta-bg-hover: rgba(32, 32, 32, 0.8);
	--site-nav-cta-color: var(--site-color-white);

	/* Semantic — Mega menu */
	--site-megamenu-bg: var(--site-color-white);
	--site-megamenu-border: var(--site-color-gray-200);
	--site-megamenu-shadow: 0 18px 36px rgb(0 0 0 / 0.08);
	--site-megamenu-trigger-active-bg: var(--site-surface-selected);
	--site-megamenu-title-color: var(--site-color-black);
	--site-megamenu-desc-color: var(--site-color-gray-650);
	--site-megamenu-eyebrow-color: var(--site-color-gray-550);
	--site-megamenu-accent: var(--site-surface-brand-dark);
	--site-megamenu-accent-soft: var(--site-surface-alt);
	--site-megamenu-link-color: var(--site-text-primary);
	--site-megamenu-link-hover-color: var(--site-megamenu-accent);
	--site-megamenu-card-hover-bg: var(--site-megamenu-accent-soft);
	--site-megamenu-list-bg: var(--site-surface-alt);
	--site-megamenu-list-active-bg: var(--site-surface-default);
	--site-megamenu-detail-bg: var(--site-surface-default);
	--site-megamenu-detail-subtle-bg: var(--site-surface-alt);
	--site-megamenu-card-border: var(--site-border-muted);
	--site-megamenu-card-hover-border: var(--site-border-default);
	--site-megamenu-card-hover-shadow: none;
	--site-megamenu-footer-link-bg: var(--site-surface-default);
	--site-megamenu-footer-link-hover-bg: var(--site-surface-alt);
	--site-size-logo-height: 25px;
	--site-size-header-bg-mobile: 20rem;
	--site-size-header-bg-tablet: 24rem;
	--site-size-header-bg-desktop: 32rem;

	/* Foundation — Typography sizes (scale) */
	--size-14: 0.875rem;                 /* 14px */
	--site-font-size-xs: 0.75rem;       /* 12px */
	--site-font-size-sm: 0.875rem;      /* 14px */
	--site-font-size-base: 1rem;        /* 16px */
	--site-font-size-md: 1.125rem;      /* 18px */
	--site-font-size-lg: 1.25rem;       /* 20px */
	--site-font-size-xl: 1.5rem;        /* 24px */
	--site-font-size-2xl: 2rem;         /* 32px */
	--site-font-size-3xl: 2.5rem;       /* 40px */

	/* Typography — Heading composites */
	--site-font-size-h1: var(--site-font-size-3xl);
	--site-font-size-h2: var(--site-font-size-2xl);
	--site-font-size-h3: var(--site-font-size-xl);
	--site-font-size-h4: var(--site-font-size-lg);
	--site-font-size-h5: var(--site-font-size-md);
	--site-font-size-h6: var(--site-font-size-base);

	/* Typography — role-specific sizes (kept) */
	--site-font-size-footer: 0.9rem;
	--site-font-size-form: 14px;
	--site-font-size-mobile-title: 18px;

	/* Typography — Font weight */
	--site-font-weight-regular: 300;
	--site-font-weight-medium: 400;
	--site-font-weight-semibold: 500;
	--site-font-weight-bold: 600;

	/* Typography — Line height */
	--site-line-height-tight: 1.25;
	--site-line-height-base: 1.5;
	--site-line-height-loose: 1.75;

	/* Foundation — Radius */
	--site-radius-none: 0;
	--site-radius-xs: 0.1rem;
	--site-radius-sm: 0.2rem;
	--site-radius-md: 0.375rem;
	--site-radius-lg: 0.5rem;
	--site-radius-pill: 999px;
	--site-radius-circle: 50%;

	/* Foundation — Opacity */
	--site-opacity-0: 0;
	--site-opacity-25: 0.25;
	--site-opacity-50: 0.5;
	--site-opacity-75: 0.75;
	--site-opacity-100: 1;

	/* Foundation — Z-index scale (Bootstrap-compatible) */
	--site-z-base: 1;
	--site-z-dropdown: 1000;
	--site-z-sticky: 1020;
	--site-z-fixed: 1030;
	--site-z-modal-backdrop: 1040;
	--site-z-modal: 1050;
	--site-z-popover: 1060;
	--site-z-tooltip: 1070;

	/* Foundation — Shadow */
	--site-shadow-dropdown: 0 2px 6px 0 rgb(0 0 0 / 30%);

	/* Foundation — Duration & Easing */
	--site-duration-xfast: 70ms;
	--site-duration-fast: 110ms;
	--site-duration-base: 200ms;
	--site-duration-slow: 500ms;
	--site-easing-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
	--site-easing-linear: linear;
	--site-easing-ease-in-out: ease-in-out;
	--site-reveal-distance-inline: 1.5rem;
	--site-reveal-distance-block: 1.25rem;
	--site-reveal-distance-inline-mobile: 1rem;
	--site-reveal-distance-block-mobile: 0.875rem;
	--site-reveal-duration: 1050ms;
	--site-reveal-stagger-step: 100ms;
	--site-reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);

	/* Foundation — Transitions (composite aliases for common patterns) */
	--site-focus-ring: inset 0 0 0 1px var(--site-action-primary), inset 0 0 0 2px var(--site-surface-default);
	--site-transition-interactive: background-color var(--site-duration-fast), border-color var(--site-duration-fast), color var(--site-duration-fast);
	--site-transition-emphasis: all var(--site-duration-xfast) var(--site-easing-standard);
	--site-transition-reveal: all var(--site-duration-slow) var(--site-easing-ease-in-out);

	/* Foundation — Container padding */
	--site-container-pad-mobile: var(--site-space-2);
	--site-container-pad-sm: var(--site-space-8);
	--site-container-pad-lg: var(--site-space-10);
	--site-container-pad-xl: var(--site-space-12);
	--site-container-pad-fluid: var(--site-space-15);

	/* ============================================================
	 * SEMANTIC — Role-based tokens. Components should consume these
	 * rather than primitives. Skin palette files override the
	 * --site-theme-* block (see assets/css/skins/).
	 * ============================================================ */

	--site-surface-default: var(--site-color-white);
	--site-surface-alt: var(--site-color-gray-050);
	--site-surface-subtle: var(--site-color-gray-100);
	--site-surface-muted: var(--site-color-gray-200);
	--site-surface-hover: var(--site-color-gray-300);
	--site-surface-selected: var(--site-color-gray-350);
	--site-surface-selected-hover: var(--site-color-gray-400);
	--site-surface-active: var(--site-color-gray-500);
	--site-surface-inverse: var(--site-color-black);
	--site-surface-brand-dark: var(--site-theme-brand-dark);

	--site-border-default: var(--site-color-gray-350);
	--site-border-muted: var(--site-color-gray-200);
	--site-border-strong: var(--site-color-slate-700);
	--site-border-disabled: var(--site-color-border-disabled);

	--site-text-primary: var(--site-color-black);
	--site-text-secondary: var(--site-color-gray-850);
	--site-text-muted: var(--site-color-gray-600);
	--site-text-subtle: var(--site-color-gray-800);
	--site-text-inverse: var(--site-color-white);
	--site-text-danger: var(--site-color-danger);

	--site-action-primary: var(--site-theme-action-primary);
	--site-action-primary-hover: var(--site-theme-action-primary-hover);
	--site-action-primary-active: var(--site-theme-action-primary-active);
	--site-action-secondary: var(--site-color-gray-900);
	--site-action-contrast: var(--site-color-white);

	--site-pagination-color: var(--site-theme-pagination);
	--site-footer-bg: var(--site-theme-footer-bg);
	--site-footer-title-color: var(--site-theme-footer-title);
	--site-footer-link-color: var(--site-theme-footer-link);
	--site-footer-link-hover: var(--site-theme-footer-link-hover);
	--site-footer-brand-copy: var(--site-theme-footer-brand-copy);
	--site-footer-social-color: var(--site-theme-footer-social);
	--site-footer-social-hover-bg: var(--site-theme-footer-social-hover-bg);
	--site-footer-meta-color: var(--site-theme-footer-meta);
	--site-footer-focus-ring: var(--site-theme-footer-focus-ring);
	--site-footer-column-gap: clamp(2rem, 3vw, 3.5rem);
	--site-footer-row-gap: clamp(2rem, 2.8vw, 3rem);
	--site-footer-brand-width: 15rem;

	/* ============================================================
	 * THEME — Skin-overridable tokens. Do NOT set values here;
	 * assets/css/skins/palette-default.css provides the defaults,
	 * and alternative palette files override the same keys.
	 * ============================================================ */

	/* Declared as fallbacks only. Real values live in skin palette. */
	--site-theme-action-primary: var(--site-color-blue-500);
	--site-theme-action-primary-hover: var(--site-color-blue-600);
	--site-theme-action-primary-active: var(--site-color-blue-800);
	--site-theme-brand-dark: var(--site-color-navy-700);
	--site-theme-pagination: var(--site-color-slate-700);
	--site-theme-footer-bg: var(--site-color-footer-navy);
	--site-theme-footer-title: var(--site-color-white);
	--site-theme-footer-link: var(--site-color-white);
	--site-theme-footer-link-hover: var(--site-color-white);
	--site-theme-footer-brand-copy: var(--site-color-white);
	--site-theme-footer-social: var(--site-color-white);
	--site-theme-footer-social-hover-bg: rgb(255 255 255 / 0.14);
	--site-theme-footer-meta: var(--site-color-white);
	--site-theme-footer-focus-ring: rgb(255 255 255 / 0.58);

	/* ============================================================
	 * LEGACY ALIASES — Older selectors and vendor snippets use
	 * these names. Kept for incremental migration. New code should
	 * use the semantic or theme tokens above.
	 * ============================================================ */

	--navbar-height: var(--site-size-navbar-height);
	--color-ui-background: var(--site-surface-default);
	--color-ui-01: var(--site-surface-subtle);
	--color-ui-02: var(--site-surface-default);
	--color-ui-03: var(--site-border-default);
	--color-ui-04: var(--site-surface-muted);
	--color-ui-05: var(--site-color-gray-700);
	--color-ui-06: var(--site-surface-inverse);
	--color-text-01: var(--site-text-primary);
	--color-text-02: var(--site-text-secondary);
	--color-text-03: var(--site-text-muted);
	--color-text-04: var(--site-text-inverse);
	--color-text-05: var(--site-text-subtle);
	--color-text-danger: var(--site-text-danger);
	--color-interactive-01: var(--site-action-primary);
	--color-interactive-02: var(--site-action-secondary);
	--color-interactive-03: var(--site-action-primary-hover);
	--color-interactive-04: var(--site-action-primary);
	--color-active-primary: var(--site-action-primary-active);
	--color-ui-hover: var(--site-surface-hover);
	--color-ui-hover-light: var(--site-surface-hover);
	--color-ui-hover-selected: var(--site-surface-selected-hover);
	--color-ui-active: var(--site-surface-active);
	--color-ui-active-light: var(--site-surface-active);
	--color-ui-selected: var(--site-surface-selected);
	--color-ui-selected-light: var(--site-surface-selected);
}