/* ==========================================================================
   VIC Theme — Design tokens (single source of truth)
   Source: CLAUDE.md + the VIC Global Design System brief. Change values HERE.

   Variables only — no selectors other than :root.

   Elementor mirror: inc/design-tokens.php holds the colour and typography
   values that are synced into Elementor Site Settings (Global Colors / Global
   Fonts) via VIC Theme → Theme Options → "Sync to Elementor". Keep the two
   in step when a colour or type size changes.

   Responsive control ranges (mobile-first; media queries cannot read custom
   properties, so the widths are repeated literally where used):
     XS: 320–479px   base
     SM: 480–767px   @media (min-width: 480px)
     MD: 768–1023px  @media (min-width: 768px)
     LG: 1024–1439px @media (min-width: 1024px)
     XL: 1440px+     @media (min-width: 1440px)
   Elementor breakpoints are aligned: Mobile ≤479 · Mobile Extra ≤767 ·
   Tablet ≤1023 · Laptop ≤1439 · Desktop ≥1440.

   Major headings use clamp() (fluid between ranges, tuned to the QA targets);
   spacing steps per range by redefining semantic tokens at the bottom.
   ========================================================================== */

:root {
	/* ------------------------------------------------------------------
	   Colour — brand
	   ------------------------------------------------------------------ */
	--vic-blue: #003C7F;
	--vic-blue-dark: #002E63;   /* hover / pressed of VIC Blue */
	--vic-blue-deep: #001D40;   /* footer, dark sections */
	--vic-orange: #F99D1C;      /* accent only — 2.13:1 on white, never small text on light backgrounds */
	--vic-orange-dark: #8A4A00; /* accessible orange text on light surfaces (6.05–6.86:1) */
	--vic-orange-large: #CF7800; /* orange for LARGE text only (headings ≥24px, or ≥18.66px bold) on
	                                Surface / Surface Soft: 3.31:1 / 3.09:1 (WCAG AA large ≥3:1).
	                                Not for body text, and not on Surface Muted (2.92:1). */

	/* ------------------------------------------------------------------
	   Colour — neutrals
	   ------------------------------------------------------------------ */
	--color-background: #FFFFFF;
	--color-surface-soft: #F5F7FA;
	--color-surface-muted: #EDF1F5;
	--color-border: #DCE3EB;

	--color-heading: #172B45;
	--color-body: #34465B;
	--color-muted: #64748B;     /* 4.76:1 on white only — use --color-body on soft/muted surfaces */

	/* Brief naming (aliases of the above). */
	--surface: var(--color-background);
	--surface-soft: var(--color-surface-soft);
	--surface-muted: var(--color-surface-muted);

	/* ------------------------------------------------------------------
	   Colour — semantic (real states only)
	   ------------------------------------------------------------------ */
	--color-success: #16834A;
	--color-warning: #A66300;
	--color-error: #C73535;

	/* ------------------------------------------------------------------
	   Colour — roles (components use these, not raw brand values)
	   ------------------------------------------------------------------ */
	--color-link: var(--vic-blue);
	--color-link-hover: var(--vic-blue-dark);
	--color-accent: var(--vic-orange);
	--color-accent-text: var(--vic-orange-dark);
	--color-accent-text-large: var(--vic-orange-large); /* orange highlight inside large headings */
	--color-on-dark: #FFFFFF;
	--color-on-dark-muted: var(--color-border);
	--color-placeholder: var(--color-muted);

	/* ------------------------------------------------------------------
	   Typography — family & weights (self-hosted Inter variable WOFF2,
	   font-display: swap; only 400/500/600/700 are used)
	   ------------------------------------------------------------------ */
	--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	/* ------------------------------------------------------------------
	   Typography — scale. Desktop (XL) values = the brief. Line-heights are
	   unitless ratios of the desktop spec; tracking is in em so it scales.
	   QA targets (XS / SM / MD / LG / XL) are noted per heading.
	   ------------------------------------------------------------------ */

	/* Display / Hero — targets XS 36–38 · SM 38–42 · MD 44–50 · LG 52–60 · XL 60–64.
	   Fluid within each range, re-based per range below (one line can't
	   satisfy both XS ≤38 at 479px and SM ≥38 at 480px). XS: 36 → 38. */
	--text-display-size: clamp(2.25rem, 1.998rem + 1.258vw, 2.375rem);
	--text-display-line: 1.125;
	--text-display-tracking: -0.03125em;

	/* H1: 34→52 · ≈35 / 37 / 43 / 48 / 52 (targets 34–36 / 36–40 / 42–46 / 48–52 / 52) */
	--text-h1-size: clamp(2.125rem, 1.7159rem + 2.0455vw, 3.25rem);
	--text-h1-line: 1.1538;
	--text-h1-tracking: -0.0288em;

	/* H2: 28→40 · ≈29 / 30 / 35 / 39 / 40 (targets 28–30 / 30–32 / 34–36 / 38–40 / 40) */
	--text-h2-size: clamp(1.75rem, 1.4423rem + 1.5385vw, 2.5rem);
	--text-h2-line: 1.2;
	--text-h2-tracking: -0.025em;

	/* H3: 22→30 · ≈23 / 24 / 27 / 29 / 30 (targets 22–24 / 24 / 26–28 / 28–30 / 30) */
	--text-h3-size: clamp(1.375rem, 1.1699rem + 1.0256vw, 1.875rem);
	--text-h3-line: 1.2667;
	--text-h3-tracking: -0.0167em;

	/* H4: 21→24 */
	--text-h4-size: clamp(1.3125rem, 1.2589rem + 0.2679vw, 1.5rem);
	--text-h4-line: 1.3333;
	--text-h4-tracking: -0.0125em;

	/* H5: 18→20 */
	--text-h5-size: clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem);
	--text-h5-line: 1.4;

	/* H6: 18 */
	--text-h6-size: 1.125rem;
	--text-h6-line: 1.4444;

	/* Body Large: 17 (XS/SM) → 18 (MD+) — stepped below */
	--text-body-lg-size: 1.0625rem;
	--text-body-lg-line: 1.6667;

	/* Body: 16 everywhere */
	--text-body-size: 1rem;
	--text-body-line: 1.625;

	/* Body Small: 14 */
	--text-body-sm-size: 0.875rem;
	--text-body-sm-line: 1.5714;

	/* Caption: 12 */
	--text-caption-size: 0.75rem;
	--text-caption-line: 1.5;

	/* Navigation: 15 / 24 / 500 */
	--text-nav-size: 0.9375rem;
	--text-nav-line: 1.6;

	/* Button: 15 / 22 / 600 */
	--text-button-size: 0.9375rem;
	--text-button-line: 1.4667;

	/* Eyebrow: 12 / 18 / 600 / 1.2px */
	--text-eyebrow-size: 0.75rem;
	--text-eyebrow-line: 1.5;
	--text-eyebrow-tracking: 0.1em;

	/* Readable measure (~60–75 characters) */
	--measure-body: 45rem;    /* 720px — long-form copy, .vic-container--narrow */
	--measure-hero: 35rem;    /* 560px — hero description */

	/* ------------------------------------------------------------------
	   Spacing — base scale (4/8). No other spacing values.
	   ------------------------------------------------------------------ */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 28px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-14: 56px;
	--space-16: 64px;
	--space-18: 72px;
	--space-20: 80px;
	--space-22: 88px;
	--space-24: 96px;
	--space-26: 104px;
	--space-28: 112px;
	--space-30: 120px;

	/* ------------------------------------------------------------------
	   Spacing — semantic, responsive. XS values; stepped per range below.
	   ------------------------------------------------------------------ */
	--section-pad-y: var(--space-12);          /* Default section   48 / 56 / 72 / 96 / 112 */
	--section-pad-y-compact: var(--space-10);  /* Compact section   40 / 48 / 56 / 72 / 80 */
	--section-pad-y-large: var(--space-16);    /* Large section     64 / 72 / 96 / 112 / 120 */
	--hero-pad-y: var(--space-14);             /* Hero              56 / 64 / 80 / 104 / 120 */
	--hero-pad-y-large: var(--space-16);       /* Hero, Large       64 / 80 / 96 / 120 / 120 */
	--container-pad: var(--space-4);           /* 16 / 20 / 28 / 32 / 32 */
	--card-pad: var(--space-5);                /* 20 / 24 / 28 / 32 / 32 */
	--panel-pad: var(--space-6);               /* 24 / 28 / 32 / 40 / 40 */
	--grid-gap: var(--space-4);                /* 16 / 16 / 20 / 24 / 24 */
	--heading-gap: var(--space-6);             /* 24 / 28 / 32 / 40 / 48 — heading block → content */
	--footer-pad-y: var(--space-10);           /* 40 / 48 / 64 / 72 / 72 */

	/* Brief naming (aliases). */
	--section-space-y: var(--section-pad-y);
	--hero-space-y: var(--hero-pad-y);

	/* Fixed internal spacing */
	--gap-eyebrow: var(--space-3);   /* eyebrow → heading */
	--gap-heading: var(--space-4);   /* heading → description */
	--gap-paragraph: var(--space-4);
	--gap-field: var(--space-4);     /* form fields 16 → 20 (MD+) */
	--gap-buttons: var(--space-3);
	--gap-icon: var(--space-2);

	/* Gap presets (.vic-gap-* and the Elementor "Gap" preset) */
	--gap-xs: var(--space-4);   /* 16 */
	--gap-sm: var(--space-5);   /* 20 */
	--gap-md: var(--space-6);   /* 24 */
	--gap-lg: var(--space-8);   /* 32 */
	--gap-xl: var(--space-10);  /* 40 */

	/* ------------------------------------------------------------------
	   Layout
	   ------------------------------------------------------------------ */
	--container-max: 1240px;
	--grid-columns: 4;          /* 4 (XS/SM) → 8 (MD) → 12 (LG+) */
	--header-height: 68px;      /* 68 mobile → 80 desktop */
	--logo-width-mobile: 170px;
	--logo-width-desktop: 225px;
	--touch-target: 44px;

	/* ------------------------------------------------------------------
	   Radius
	   ------------------------------------------------------------------ */
	--radius-small: 6px;
	--radius-control: 8px;      /* buttons, inputs */
	--radius-card: 12px;        /* standard cards */
	--radius-product-card: 16px;
	--radius-product: var(--radius-product-card);
	--radius-panel: 24px;       /* large feature panels */
	--radius-pill: 999px;

	/* ------------------------------------------------------------------
	   Shadow — deliberately small: surfaces + borders do most of the work
	   ------------------------------------------------------------------ */
	--shadow-none: none;
	--shadow-soft: 0 4px 20px rgba(0, 30, 64, 0.06);
	--shadow-hover: 0 8px 24px rgba(0, 30, 64, 0.09);
	--shadow-card: var(--shadow-soft);

	/* ------------------------------------------------------------------
	   Buttons
	   ------------------------------------------------------------------ */
	--button-height-sm: 40px;
	--button-height: 48px;
	--button-height-lg: 56px;
	--button-pad-x: var(--space-6);
	--button-padding-x: var(--button-pad-x);
	--button-radius: var(--radius-control);
	--button-font-size: var(--text-button-size);
	--button-font-weight: var(--weight-semibold);

	/* ------------------------------------------------------------------
	   Forms
	   ------------------------------------------------------------------ */
	--input-height: 48px;
	--input-pad-x: var(--space-4);
	--textarea-min-height: 136px;
	--input-border: 1px solid var(--color-border);
	--input-radius: var(--radius-control);
	--label-size: var(--text-body-sm-size);
	--label-weight: var(--weight-medium);

	/* ------------------------------------------------------------------
	   Focus (WCAG 2.2 AA). A solid 2px VIC-blue outline (10.7:1 on white)
	   is used rather than a 25%-alpha ring, which would fall below the 3:1
	   non-text contrast minimum. Dark surfaces switch the colour to white.
	   ------------------------------------------------------------------ */
	--color-focus-ring: var(--vic-blue);
	--focus-ring-width: 2px;
	--focus-ring-offset: 3px;
	--focus-ring: 0 0 0 3px rgba(0, 60, 127, 0.22); /* supplementary halo for form fields */

	/* ------------------------------------------------------------------
	   Icons (Lucide outline)
	   ------------------------------------------------------------------ */
	--icon-sm: 16px;
	--icon-md: 20px;
	--icon-lg: 24px;
	--icon-stroke: 1.75;

	/* ------------------------------------------------------------------
	   Motion
	   ------------------------------------------------------------------ */
	--motion-fast: 180ms;
	--motion-default: 240ms;
	--motion-slow: 320ms;
	--ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-soft: cubic-bezier(0.16, 1, 0.3, 1);

	/* Component timings (kept for existing components) */
	--duration-fast: 150ms;
	--duration-base: 200ms;     /* hover / focus */
	--duration-menu: 220ms;     /* menus / dropdowns */
	--transition-colors: color var(--duration-base) var(--ease-standard),
		background-color var(--duration-base) var(--ease-standard),
		border-color var(--duration-base) var(--ease-standard);
	--button-transition: var(--motion-default) var(--ease-standard);

	/* ------------------------------------------------------------------
	   Layering
	   ------------------------------------------------------------------ */
	--z-header: 100;
	--z-dropdown: 110;
	--z-skip-link: 1000;
}

/* SM: 480–767 */
@media (min-width: 480px) {
	:root {
		--section-pad-y: var(--space-14);          /* 56 */
		--section-pad-y-compact: var(--space-12);  /* 48 */
		--section-pad-y-large: var(--space-18);    /* 72 */
		--hero-pad-y: var(--space-16);             /* 64 */
		--hero-pad-y-large: var(--space-20);       /* 80 */
		--container-pad: var(--space-5);           /* 20 */
		--card-pad: var(--space-6);                /* 24 */
		--panel-pad: var(--space-7);               /* 28 */
		--heading-gap: var(--space-7);             /* 28 */
		--footer-pad-y: var(--space-12);           /* 48 */
		--text-display-size: clamp(2.375rem, 1.957rem + 1.394vw, 2.625rem); /* 38 → 42 */
	}
}

/* MD: 768–1023 */
@media (min-width: 768px) {
	:root {
		--section-pad-y: var(--space-18);          /* 72 */
		--section-pad-y-compact: var(--space-14);  /* 56 */
		--section-pad-y-large: var(--space-24);    /* 96 */
		--hero-pad-y: var(--space-20);             /* 80 */
		--hero-pad-y-large: var(--space-24);       /* 96 */
		--container-pad: var(--space-7);           /* 28 */
		--card-pad: var(--space-7);                /* 28 */
		--panel-pad: var(--space-8);               /* 32 */
		--grid-gap: var(--space-5);                /* 20 */
		--heading-gap: var(--space-8);             /* 32 */
		--footer-pad-y: var(--space-16);           /* 64 */
		--gap-field: var(--space-5);               /* 20 */
		--text-body-lg-size: 1.125rem;             /* 18 */
		--text-display-size: clamp(2.75rem, 1.6206rem + 2.353vw, 3.125rem); /* 44 → 50 */
		--grid-columns: 8;
	}
}

/* LG: 1024–1439 */
@media (min-width: 1024px) {
	:root {
		--section-pad-y: var(--space-24);          /* 96 */
		--section-pad-y-compact: var(--space-18);  /* 72 */
		--section-pad-y-large: var(--space-28);    /* 112 */
		--hero-pad-y: var(--space-26);             /* 104 */
		--hero-pad-y-large: var(--space-30);       /* 120 */
		--container-pad: var(--space-8);           /* 32 */
		--card-pad: var(--space-8);                /* 32 */
		--panel-pad: var(--space-10);              /* 40 */
		--grid-gap: var(--space-6);                /* 24 */
		--heading-gap: var(--space-10);            /* 40 */
		--footer-pad-y: var(--space-18);           /* 72 */
		--grid-columns: 12;
		--header-height: 80px;
		--text-display-size: clamp(3.25rem, 2.016rem + 1.928vw, 3.75rem); /* 52 → 60 */
	}
}

/* XL: 1440+ */
@media (min-width: 1440px) {
	:root {
		--section-pad-y: var(--space-28);          /* 112 */
		--section-pad-y-compact: var(--space-20);  /* 80 */
		--section-pad-y-large: var(--space-30);    /* 120 */
		--hero-pad-y: var(--space-30);             /* 120 */
		--heading-gap: var(--space-12);            /* 48 */
		--text-display-size: 4rem;                 /* 64 */
	}
}