/**
 * Fort design tokens — design/SPEC.md §1.
 *
 * Names are --fort-<token>. The Elementor Kit uses the same hex values.
 * Breakpoints cannot be custom properties. Use these max-widths, which match
 * the Kit (mobile 640, tablet 960, laptop 1200):
 *   @media (max-width: 1200px)
 *   @media (max-width: 960px)
 *   @media (max-width: 640px)
 */

:root {
	/* Colours */
	--fort-navy: #111f43;
	--fort-navy-dark: #0b1635;
	--fort-navy-panel: #1c2c5f;
	--fort-red: #a63232;
	--fort-red-dark: #852323;
	--fort-blue: #70bbed;
	--fort-gold: #f0c03c;
	--fort-bg: #fafaf8;
	--fort-bg-alt: #efede5;
	--fort-bg-soft: #f6f4f0;
	--fort-white: #ffffff;
	--fort-text-gray: #596170;
	/* Membership help subtitle (.mgmt__cta p in the design). */
	--fort-text-help: #2a3a66;
	--fort-text-on-dark: #b2b8c7;
	--fort-text-on-dark-strong: #d9dee5;
	--fort-text-footer: #9ea6bd;
	--fort-header-phone: #ccd2dd;
	--fort-divider: #333d59;
	--fort-border: #d9d9e0;
	--fort-rule-light: #e8e6dc;
	--fort-rule-faq: #d8d4c9;
	--fort-link-blue: #1b74b5;
	--fort-required: #e16b5f;
	--fort-placeholder: #9999a3;

	/* Typography */
	--fort-font-display: "Bebas Neue", Impact, sans-serif;
	--fort-font-label: "Oswald", "Arial Narrow", sans-serif;
	--fort-font-body: "Open Sans", "Segoe UI", sans-serif;

	--fort-fs-hero: 96px;
	--fort-fs-display-xl: 64px;
	--fort-fs-display: 56px;
	--fort-fs-display-s: 52px;
	--fort-fs-display-m: 40px;
	--fort-fs-eyebrow: 14px;
	--fort-fs-nav: 14px;
	--fort-fs-button: 14px;
	--fort-fs-lead: 17px;
	--fort-fs-body: 16px;
	--fort-fs-small: 14px;
	--fort-fs-meta: 13px;

	--fort-lh-display: 1.05;
	--fort-lh-hero: 0.96;
	--fort-lh-body: 1.6;
	--fort-lh-lead: 1.65;

	--fort-fw-regular: 400;
	--fort-fw-medium: 500;
	--fort-fw-semibold: 600;
	--fort-fw-bold: 700;

	--fort-tracking-eyebrow: 2.5px;
	--fort-tracking-nav: 1.2px;
	--fort-tracking-label: 1.5px;

	/* Layout */
	--fort-gutter: 80px;
	--fort-header-max: 1440px;
	--fort-header-pad-block: 20px;
	--fort-header-pad-inline: 64px;
	--fort-prose-max: 760px;
	--fort-container-max: 1440px;
	--fort-container-pad: var(--fort-gutter);
	--fort-header-height: 86px;

	/* Radii */
	--fort-radius-button: 3px;
	--fort-radius-tag: 4px;
	--fort-radius-card: 8px;
	--fort-radius-tile: 10px;
	--fort-radius-panel: 12px;
	--fort-radius-class: 16px;

	/* Shadows */
	--fort-shadow-dropdown: 0 8px 24px rgb(17 31 67 / 18%);
	--fort-shadow-card-hover: 0 12px 24px rgb(17 31 67 / 12%);

	/* Motion */
	--fort-duration-fast: 180ms;
	--fort-duration-base: 200ms;
	--fort-ease: ease;

	/* Z-index */
	--fort-z-header: 100;
	--fort-z-dropdown: 150;
	--fort-z-overlay: 200;

	/* Focus */
	--fort-focus-ring: 0 0 0 3px rgb(112 187 237 / 55%);

	/*
	 * Aliases kept so earlier skeleton rules and widgets can keep reading them.
	 * New CSS should use the --fort-<token> names above.
	 */
	--fort-color-primary: var(--fort-navy);
	--fort-color-secondary: var(--fort-red);
	--fort-color-red: var(--fort-red);
	--fort-color-red-dark: var(--fort-red-dark);
	--fort-color-blue: var(--fort-blue);
	--fort-color-gold: var(--fort-gold);
	--fort-color-navy-dark: var(--fort-navy-dark);
	--fort-color-navy-panel: var(--fort-navy-panel);
	/* Widget CSS uses "accent" for gold eyebrows and bullets. The Kit's Accent colour is blue. */
	--fort-color-accent: var(--fort-gold);
	--fort-color-text: var(--fort-navy);
	--fort-color-text-muted: var(--fort-text-gray);
	--fort-color-bg: var(--fort-bg);
	--fort-color-surface: var(--fort-bg-alt);
	--fort-color-border: var(--fort-border);
	--fort-color-inverse: var(--fort-white);
	--fort-font-heading: var(--fort-font-display);
	--fort-fs-xs: 12px;
	--fort-fs-sm: var(--fort-fs-small);
	--fort-fs-base: var(--fort-fs-body);
	--fort-fs-md: 18px;
	--fort-fs-lg: 22px;
	--fort-fs-xl: 32px;
	--fort-fs-2xl: var(--fort-fs-display-m);
	--fort-fs-3xl: var(--fort-fs-display);
	--fort-fs-4xl: var(--fort-fs-hero);
	--fort-lh-tight: var(--fort-lh-display);
	--fort-lh-snug: 1.3;
	--fort-lh-base: var(--fort-lh-body);
	--fort-space-1: 4px;
	--fort-space-2: 8px;
	--fort-space-3: 12px;
	--fort-space-4: 16px;
	--fort-space-5: 24px;
	--fort-space-6: 32px;
	--fort-space-7: 48px;
	--fort-space-8: 72px;
	--fort-space-9: 96px;
	--fort-space-10: 110px;
	--fort-radius-sm: var(--fort-radius-tag);
	--fort-radius-md: var(--fort-radius-card);
	--fort-radius-lg: var(--fort-radius-class);
	--fort-radius-pill: 999px;
	--fort-shadow-sm: 0 1px 2px rgb(17 31 67 / 8%);
	--fort-shadow-md: var(--fort-shadow-dropdown);
	--fort-shadow-lg: var(--fort-shadow-card-hover);
	--fort-transition: var(--fort-duration-base) var(--fort-ease);
}

@media (max-width: 1200px) {
	:root {
		--fort-gutter: 48px;
		--fort-fs-hero: 72px;
	}
}

@media (max-width: 960px) {
	:root {
		--fort-header-pad-inline: 48px;
	}
}

@media (max-width: 640px) {
	:root {
		--fort-gutter: 24px;
		--fort-header-pad-block: 16px;
		--fort-header-pad-inline: 24px;
		--fort-fs-hero: 48px;
		--fort-fs-display-xl: 40px;
		--fort-fs-display: 40px;
		--fort-fs-display-s: 40px;
		--fort-header-height: 78px;
	}
}