/**
 * AOR design tokens — the single source of truth.
 *
 * Nothing in this file emits a style. It only declares custom properties, so
 * it is always safe to load and can never collide with Salient.
 *
 * TWO LAYERS
 *   Primitives  --aor-font-size-*, --aor-space-*   the raw design scales
 *   Semantic    --aor-text-h1, --aor-space-md …    what a thing is used for
 * Component CSS should reach for the semantic token where one exists, and fall
 * back to a primitive otherwise. Never write a raw value.
 *
 * FLUID SCALE
 * Every size interpolates between its mobile and desktop value over a
 * 375px -> 1440px viewport. Below 375 the mobile value holds; above 1440 the
 * desktop value holds. All values verified to resolve exactly at both ends.
 *
 * To add one, compute:
 *   slope     = (desktop - mobile) / (1440 - 375) * 100     [vw]
 *   intercept = mobile - slope * 375 / 100                  [px, then / 16 = rem]
 *   clamp( mobile, intercept + slope, desktop )
 */

:root {
	/* ----------------------------------------------------------------------
	 * Typeface
	 * Confirmed against Figma (Type Sizes page): Montserrat throughout.
	 * Salient already loads the webfont; the stack here just stops a theme
	 * settings change from silently restyling every component.
	 * -------------------------------------------------------------------- */
	--aor-font-heading: 'Montserrat', sans-serif;
	--aor-font-body: 'Montserrat', sans-serif;

	--aor-weight-heading: 600;
	--aor-weight-body: 400;
	/* Emphasis inside body copy — <strong>/<b>, heavier than a heading. */
	--aor-weight-bold: 700;

	/* ----------------------------------------------------------------------
	 * PRIMITIVE — font size scale                        mobile -> desktop
	 * -------------------------------------------------------------------- */
	--aor-font-size-7x: clamp(2.5rem, 2.3239rem + 0.7512vw, 3rem);        /* 40 -> 48 */
	--aor-font-size-6x: clamp(2.25rem, 2.162rem + 0.3756vw, 2.5rem);      /* 36 -> 40 */
	--aor-font-size-5x: clamp(2rem, 1.912rem + 0.3756vw, 2.25rem);        /* 32 -> 36 */
	--aor-font-size-4x: clamp(1.75rem, 1.662rem + 0.3756vw, 2rem);        /* 28 -> 32 */
	--aor-font-size-3x: clamp(1.5rem, 1.368rem + 0.5634vw, 1.875rem);     /* 24 -> 30 */
	--aor-font-size-2x: clamp(1.5rem, 1.412rem + 0.3756vw, 1.75rem);      /* 24 -> 28 */
	--aor-font-size-xl: clamp(1.25rem, 1.162rem + 0.3756vw, 1.5rem);      /* 20 -> 24 */
	--aor-font-size-lg: clamp(1.125rem, 1.081rem + 0.1878vw, 1.25rem);    /* 18 -> 20 */
	--aor-font-size-md: clamp(0.875rem, 0.831rem + 0.1878vw, 1rem);       /* 14 -> 16 */
	--aor-font-size-sm: clamp(0.775rem, 0.7398rem + 0.1502vw, 0.875rem);  /* 12.4 -> 14 */
	--aor-font-size-xs: clamp(0.625rem, 0.5722rem + 0.2254vw, 0.775rem);  /* 10 -> 12.4 */

	/* ----------------------------------------------------------------------
	 * PRIMITIVE — spacing scale                          mobile -> desktop
	 * -------------------------------------------------------------------- */
	--aor-space-9xl: clamp(6.5rem, 6.3239rem + 0.7512vw, 7rem);           /* 104 -> 112 */
	--aor-space-8xl: clamp(6rem, 5.8239rem + 0.7512vw, 6.5rem);           /* 96 -> 104 */
	--aor-space-7xl: clamp(5rem, 4.6479rem + 1.5023vw, 6rem);             /* 80 -> 96 */
	--aor-space-6xl: clamp(4.5rem, 4.3239rem + 0.7512vw, 5rem);           /* 72 -> 80 */
	--aor-space-5xl: clamp(4rem, 3.8239rem + 0.7512vw, 4.5rem);           /* 64 -> 72 */
	--aor-space-4xl: clamp(3.5rem, 3.3239rem + 0.7512vw, 4rem);           /* 56 -> 64 */
	--aor-space-3xl: clamp(3rem, 2.8239rem + 0.7512vw, 3.5rem);           /* 48 -> 56 */
	--aor-space-2xl: clamp(2.5rem, 2.3239rem + 0.7512vw, 3rem);           /* 40 -> 48 */
	--aor-space-xl: clamp(2.25rem, 2.162rem + 0.3756vw, 2.5rem);          /* 36 -> 40 */
	--aor-space-lg: clamp(2rem, 1.912rem + 0.3756vw, 2.25rem);            /* 32 -> 36 */
	--aor-space-md: clamp(1.75rem, 1.662rem + 0.3756vw, 2rem);            /* 28 -> 32 */
	--aor-space-sm: clamp(1.5rem, 1.412rem + 0.3756vw, 1.75rem);          /* 24 -> 28 */
	--aor-space-xs: clamp(1.25rem, 1.162rem + 0.3756vw, 1.5rem);          /* 20 -> 24 */
	--aor-space-2xs: clamp(1.125rem, 1.081rem + 0.1878vw, 1.25rem);       /* 18 -> 20 */
	--aor-space-3xs: clamp(1rem, 0.956rem + 0.1878vw, 1.125rem);          /* 16 -> 18 */
	--aor-space-4xs: clamp(0.75rem, 0.662rem + 0.3756vw, 1rem);           /* 12 -> 16 */
	--aor-space-5xs: clamp(0.5rem, 0.412rem + 0.3756vw, 0.75rem);         /* 8 -> 12 */
	--aor-space-6xs: clamp(0.35rem, 0.2972rem + 0.2254vw, 0.5rem);        /* 5.6 -> 8 */
	--aor-space-7xs: clamp(0.25rem, 0.2148rem + 0.1502vw, 0.35rem);       /* 4 -> 5.6 */
	--aor-space-8xs: clamp(0.15rem, 0.1148rem + 0.1502vw, 0.25rem);       /* 2.4 -> 4 */
	--aor-space-9xs: clamp(0.075rem, 0.0486rem + 0.1127vw, 0.15rem);      /* 1.2 -> 2.4 */

	/* ----------------------------------------------------------------------
	 * SEMANTIC — headings
	 *
	 * Aliases onto the primitive scale wherever the type spec matches it.
	 *
	 * NOTE h5 (18 -> 16) has no primitive: the scale jumps from lg (20 -> 18)
	 * to md (16 -> 14). It is written out explicitly below. Worth confirming
	 * with the designer whether the scale is missing a step or h5 should move
	 * onto font-size-lg.
	 * -------------------------------------------------------------------- */
	--aor-text-h1: var(--aor-font-size-7x);                               /* 40 -> 48 */
	--aor-text-h2: var(--aor-font-size-5x);                               /* 32 -> 36 */
	--aor-text-h3: var(--aor-font-size-4x);                               /* 28 -> 32 */
	--aor-text-h4: var(--aor-font-size-xl);                               /* 20 -> 24 */
	--aor-text-h5: clamp(1rem, 0.956rem + 0.1878vw, 1.125rem);            /* 16 -> 18  no primitive */
	--aor-text-h6: var(--aor-font-size-sm);                               /* 12.4 -> 14 */

	--aor-leading-h1: 1.1;
	--aor-leading-h2: 1.1;
	--aor-leading-h3: 1.2;
	--aor-leading-h4: 1.2;
	--aor-leading-h5: 1.3;
	--aor-leading-h6: 1.3;

	/* ----------------------------------------------------------------------
	 * SEMANTIC — body copy, all 145% line height
	 *
	 * Named p-* to keep them distinct from the primitives: the spec's "P lg"
	 * is 18 -> 16, which is NOT --aor-font-size-lg (20 -> 18).
	 * -------------------------------------------------------------------- */
	--aor-text-p-lg: clamp(1rem, 0.956rem + 0.1878vw, 1.125rem);          /* 16 -> 18  no primitive */
	--aor-text-p-md: var(--aor-font-size-md);                             /* 14 -> 16 */
	--aor-text-p-sm: var(--aor-font-size-sm);                             /* 12.4 -> 14 */
	--aor-text-p-xs: var(--aor-font-size-xs);                             /* 10 -> 12.4 */

	--aor-leading-body: 1.45;
	--aor-text-base: var(--aor-text-p-md);

	/* Display size for stat values — 96px in the R3 stats band. No mobile
	 * design exists; 48 is a judgment call matching h1. */
	--aor-text-stat: clamp(3rem, 1.9437rem + 4.507vw, 6rem);              /* 48 -> 96 */
	--aor-leading-stat: 1.1;

	/* ----------------------------------------------------------------------
	 * Colour
	 * -------------------------------------------------------------------- */
	/* Confirmed against Figma via the API (homepage frame fill sweep). */
	--aor-color-brand: #b80a26;
	--aor-color-brand-dark: #9c0920;   /* -15% for hover/active */

	--aor-color-heading: #333333;
	--aor-color-body: #333333;
	--aor-color-border: #e5e5e5;
	--aor-color-surface: #ffffff;
	--aor-color-surface-alt: #f9f9f9;  /* light section backgrounds */
	--aor-color-surface-dark: #333333; /* dark section backgrounds (hero) */
	--aor-color-text-inverse: #ffffff; /* text on dark surfaces */

	/* Photo overlays, from the hero design: every hero photo carries a 50%
	 * black multiply fill, plus an extra #333 tint over the text side. */
	--aor-overlay-photo: rgba(0, 0, 0, 0.5);
	--aor-overlay-tint: rgba(51, 51, 51, 0.25);

	/* Brand gradient — the red -> orange -> gold sweep behind the stats band
	 * and the hero's angled shapes. Stop positions per section may vary;
	 * override the angle per component, not the colours. */
	--aor-color-grad-red: #b80a26;
	--aor-color-grad-orange: #eb6e21;
	--aor-color-grad-gold: #efb446;

	/* Button colours alias the brand, but stay separately addressable so a
	 * future button style can diverge without redefining what "brand" means. */
	--aor-color-btn-bg: var(--aor-color-brand);
	--aor-color-btn-bg-hover: var(--aor-color-brand-dark);
	--aor-color-btn-text: #ffffff;

	/* ----------------------------------------------------------------------
	 * SEMANTIC — shape and layout
	 * -------------------------------------------------------------------- */
	--aor-radius-card: 10px;
	--aor-radius-pill: 999px;
	/* Form fields — the footer newsletter input in the R3 comp. */
	--aor-radius-input: 8px;

	/* Card icons are drawn on a 50px grid in Figma. */
	--aor-icon-size: 3.125rem;

	/* Caps for partner logos in the logo grid — marks vary in both
	 * directions, so both axes are bounded and aspect follows. */
	--aor-logo-height: clamp(3rem, 2.4719rem + 2.2535vw, 4.5rem);         /* 48 -> 72 */
	--aor-logo-width: 200px;

	/* Outer content width — 1440px per the R3 frame (1728 minus 144 each
	 * side). Wider than Salient's 1425px container, which is why every AOR
	 * section renders as a breakout: inside a Salient column this cap could
	 * never be reached. */
	--aor-container-max: 1440px;

	--aor-section-padding-y: var(--aor-space-7xl);                        /* 80 -> 96 */
	--aor-section-intro-gap: var(--aor-space-2xl);                        /* 40 -> 48 */
	--aor-section-intro-text-max: 1000px;

	--aor-grid-gap: var(--aor-space-xs);                                  /* 20 -> 24 */
	--aor-card-padding: var(--aor-space-md);                              /* 28 -> 32 */
}

/* Mobile sections breathe less — the 80px floor of the desktop rhythm reads
 * as dead space on a phone. Redefining the semantic token keeps every
 * consumer in step; the primitives stay untouched. */
@media (max-width: 767px) {
	:root {
		--aor-section-padding-y: var(--aor-space-2xl);                    /* 40 -> 48 */
	}
}