/*
 * Design tokens.
 *
 * Two layers, on purpose:
 *
 *   1. Palette ramp. Raw values, named by hue and step. Components never use these
 *      directly.
 *   2. Semantic tokens. What a value means, not what it looks like. Components use
 *      only these, so a palette revision does not require touching a component.
 *
 * theme.json is the canonical source for the palette, the type scale, and the
 * spacing scale, because the block editor reads it. Every token below points at the
 * matching preset property and carries a literal fallback, so the CSS still works if
 * a preset is renamed and the two can never silently diverge.
 *
 * Contrast values for every common pairing are recorded in docs/DESIGN-SYSTEM.md.
 * All normal text combinations used by the theme meet WCAG AA.
 */

:root {
	/* ---------------------------------------------------------------------
	 * Layer 1: palette ramp
	 * ------------------------------------------------------------------ */

	--afc-white: var(--wp--preset--color--white, #ffffff);
	--afc-warm-white: var(--wp--preset--color--warm-white, #faf8f5);
	--afc-stone: var(--wp--preset--color--stone, #efeae2);
	--afc-steel-100: var(--wp--preset--color--steel-100, #e3e6ec);
	--afc-steel-300: var(--wp--preset--color--steel-300, #b9c0cb);
	--afc-steel-600: var(--wp--preset--color--steel-600, #5b6473);
	--afc-charcoal: var(--wp--preset--color--charcoal, #2b2f38);
	--afc-ink: var(--wp--preset--color--ink, #12141a);

	--afc-navy: var(--wp--preset--color--navy, #1b2a5c);
	--afc-navy-dark: var(--wp--preset--color--navy-dark, #101c40);
	--afc-navy-deep: var(--wp--preset--color--navy-deep, #070d20);
	--afc-navy-heritage: var(--wp--preset--color--navy-heritage, #2c2d87);

	--afc-red: var(--wp--preset--color--red, #c81e1e);
	--afc-red-dark: var(--wp--preset--color--red-dark, #9d1616);
	--afc-red-heritage: var(--wp--preset--color--red-heritage, #e22222);
	--afc-red-bright: #f82f2f;

	--afc-green: #1e7a45;

	/* ---------------------------------------------------------------------
	 * Layer 2: semantic tokens
	 * ------------------------------------------------------------------ */

	/* Brand */
	--afc-color-brand-navy: var(--afc-navy);
	--afc-color-brand-navy-dark: var(--afc-navy-dark);
	--afc-color-brand-red: var(--afc-red);
	--afc-color-brand-red-dark: var(--afc-red-dark);

	/* Legacy identity, kept as reference points. The two brighter reds are for
	   graphics, rules, and large display text only. Neither clears AA for normal
	   body text on white. */
	--afc-color-heritage-navy: var(--afc-navy-heritage);
	--afc-color-heritage-red: var(--afc-red-heritage);
	--afc-color-accent-red: var(--afc-red-bright);

	/* Text */
	--afc-color-ink: var(--afc-ink);
	--afc-color-text: var(--afc-charcoal);
	--afc-color-text-strong: var(--afc-navy-dark);
	--afc-color-text-muted: var(--afc-steel-600);
	--afc-color-text-on-dark: var(--afc-white);
	--afc-color-text-muted-on-dark: var(--afc-steel-300);

	/* Surfaces */
	--afc-color-surface: var(--afc-white);
	--afc-color-surface-subtle: var(--afc-warm-white);
	--afc-color-surface-stone: var(--afc-stone);
	--afc-color-surface-dark: var(--afc-navy-dark);
	--afc-color-surface-darker: var(--afc-navy-deep);

	/* Lines */
	--afc-color-border: var(--afc-steel-100);
	--afc-color-border-strong: var(--afc-steel-300);
	--afc-color-border-on-dark: rgba(255, 255, 255, 0.16);
	--afc-color-rule-accent: var(--afc-red);

	/* States */
	--afc-color-focus: var(--afc-navy-heritage);
	--afc-color-focus-on-dark: var(--afc-white);
	--afc-color-success: var(--afc-green);
	--afc-color-error: var(--afc-red-dark);
	--afc-color-disabled-surface: var(--afc-steel-100);
	--afc-color-disabled-text: var(--afc-steel-600);

	/* Scrims used to protect text placed over photography */
	--afc-scrim-bottom: linear-gradient(180deg, rgba(7, 13, 32, 0) 30%, rgba(7, 13, 32, 0.78) 100%);
	--afc-scrim-left: linear-gradient(90deg, rgba(7, 13, 32, 0.82) 0%, rgba(7, 13, 32, 0.35) 55%, rgba(7, 13, 32, 0) 100%);
	--afc-scrim-full: linear-gradient(180deg, rgba(7, 13, 32, 0.55) 0%, rgba(7, 13, 32, 0.72) 100%);

	/* ---------------------------------------------------------------------
	 * Gradients
	 *
	 * A dark section is not a fill. It is a lit surface: a raked plane of navy that
	 * cools into charcoal and then lifts into steel blue, with a cool light source
	 * off the top left corner and a controlled red glow low on the opposite side.
	 * That is three separate layers, and the radial layers are what make the
	 * difference visible in a screenshot rather than only on inspection.
	 *
	 * Accessibility is held by bounding the lit region. The brightest point of the
	 * navy surface, where the blue light source is at full strength, measures 8.69
	 * to 1 against white, so white body text clears AA everywhere on the plane and
	 * clears AAA across most of it. The red glow only ever falls on the darkest
	 * corner, where it lands around 15 to 1.
	 * ------------------------------------------------------------------ */

	--afc-gradient-navy:
		radial-gradient(105% 80% at 12% -15%, rgba(96, 126, 200, 0.42) 0%, rgba(96, 126, 200, 0) 58%),
		radial-gradient(70% 60% at 100% 105%, rgba(226, 34, 34, 0.22) 0%, rgba(226, 34, 34, 0) 62%),
		linear-gradient(158deg, #16224c 0%, #101a3a 32%, #141a2a 62%, #222a3c 100%);

	--afc-gradient-navy-deep:
		radial-gradient(90% 70% at 50% -20%, rgba(70, 96, 160, 0.36) 0%, rgba(70, 96, 160, 0) 60%),
		radial-gradient(60% 55% at 6% 108%, rgba(226, 34, 34, 0.20) 0%, rgba(226, 34, 34, 0) 60%),
		linear-gradient(168deg, #0a1130 0%, #070d20 42%, #0d1220 70%, #171d2b 100%);

	--afc-gradient-charcoal:
		radial-gradient(95% 75% at 85% -10%, rgba(150, 168, 200, 0.24) 0%, rgba(150, 168, 200, 0) 58%),
		linear-gradient(158deg, #3a4150 0%, #2b2f38 40%, #1c1f26 74%, #292e39 100%);

	/* Action. White on the lightest stop is 5.74 to 1, so AA at any point. The
	   inner highlight in the button rule does the rest of the work. */
	--afc-gradient-red:
		radial-gradient(120% 140% at 25% -30%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 55%),
		linear-gradient(148deg, #e02626 0%, #c81e1e 45%, #9c1414 100%);
	--afc-gradient-red-hover:
		radial-gradient(120% 140% at 25% -30%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 58%),
		linear-gradient(148deg, #ee2f2f 0%, #cf2020 45%, #a81717 100%);

	/* Light surfaces. Warm white at the top cooling into a metallic grey at the
	   foot, with a bright spot high on the right and a cool steel wash rising from
	   the lower left. Charcoal body text on the coolest corner is 9.6 to 1. */
	--afc-gradient-light:
		radial-gradient(70% 55% at 88% -8%, #ffffff 0%, rgba(255, 255, 255, 0) 58%),
		radial-gradient(85% 65% at 5% 108%, rgba(148, 166, 196, 0.22) 0%, rgba(148, 166, 196, 0) 62%),
		linear-gradient(163deg, #ffffff 0%, #fbfaf7 32%, #f1f3f7 70%, #e3e8f0 100%);
	--afc-gradient-stone:
		radial-gradient(70% 50% at 10% -8%, #fffefb 0%, rgba(255, 255, 255, 0) 56%),
		radial-gradient(80% 60% at 95% 106%, rgba(130, 150, 184, 0.34) 0%, rgba(130, 150, 184, 0) 60%),
		linear-gradient(163deg, #f8f5ef 0%, #eee8de 34%, #dde2ea 72%, #c4cddd 100%);

	/* A white card is not flat either. This is the surface a card sits on. */
	--afc-gradient-card:
		linear-gradient(168deg, #ffffff 0%, #fdfdfe 55%, #f4f6fa 100%);
	--afc-gradient-card-cool:
		linear-gradient(168deg, #ffffff 0%, #f6f8fc 45%, #e9edf5 100%);

	/* Hairlines. A rule that fades at both ends reads as machined rather than
	   drawn, and it lets a divider stop without a hard corner. */
	--afc-gradient-rule: linear-gradient(90deg, transparent 0%, var(--afc-steel-300) 22%, var(--afc-steel-300) 78%, transparent 100%);
	--afc-gradient-rule-on-dark: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.28) 22%, rgba(255, 255, 255, 0.28) 78%, transparent 100%);
	--afc-gradient-rule-accent: linear-gradient(90deg, var(--afc-red-bright) 0%, var(--afc-red) 45%, #8f1212 100%);

	/* Borders. Anodised aluminium: a bright top left edge falling to a shadowed
	   bottom right one, which is what an extruded metal frame actually does. */
	--afc-gradient-border-metal: linear-gradient(150deg, #ffffff 0%, #c2ccdb 22%, #74829a 50%, #b8c3d4 76%, #ffffff 100%);
	--afc-gradient-border-metal-dark: linear-gradient(150deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.14) 30%, rgba(255, 255, 255, 0.04) 58%, rgba(255, 255, 255, 0.20) 100%);
	/* Red to deep crimson, so an accent border stays red along its whole length. */
	--afc-gradient-border-accent: linear-gradient(150deg, var(--afc-red-bright) 0%, var(--afc-red) 42%, #7d0f0f 100%);

	/* Structural planes: navy cooling into charcoal, for angled plates and backings. */
	--afc-gradient-steel: linear-gradient(152deg, #1d2a56 0%, #17203e 38%, #232730 76%, #2e333e 100%);
	--afc-gradient-steel-dark: linear-gradient(152deg, #141d3c 0%, #111829 44%, #1c2028 100%);

	/* Machined silver, for the licence plate and any bright metal face. */
	--afc-gradient-silver: linear-gradient(148deg, #ffffff 0%, #eef1f6 32%, #cdd5e0 68%, #aab4c4 100%);

	/* Numerals and display text. */
	--afc-gradient-text-navy: linear-gradient(150deg, #2c3f7d 0%, #16224c 46%, #4a566d 100%);
	--afc-gradient-text-light: linear-gradient(150deg, #ffffff 0%, #dfe6f2 52%, #9fb0cc 100%);
	--afc-gradient-text-accent: linear-gradient(150deg, #f82f2f 0%, #c81e1e 58%, #8f1212 100%);

	/* Illuminated edge, for the top of a dark band. Bright enough to read as a
	   machined chamfer catching the light. */
	--afc-gradient-edge-lit: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 18%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.5) 82%, rgba(255, 255, 255, 0) 100%);
	--afc-gradient-edge-lit-red: linear-gradient(90deg, rgba(248, 47, 47, 0) 0%, rgba(248, 47, 47, 0.55) 22%, rgba(248, 47, 47, 0.95) 50%, rgba(248, 47, 47, 0.55) 78%, rgba(248, 47, 47, 0) 100%);

	/* Radial lighting placed behind featured content. */
	--afc-glow-field-blue: radial-gradient(50% 50% at 50% 50%, rgba(96, 132, 220, 0.30) 0%, rgba(96, 132, 220, 0) 70%);
	--afc-glow-field-red: radial-gradient(50% 50% at 50% 50%, rgba(226, 34, 34, 0.28) 0%, rgba(226, 34, 34, 0) 70%);

	/* ---------------------------------------------------------------------
	 * Metal and texture
	 *
	 * A diagonal sheen, a brushed grain, and a two level drafting grid with major
	 * and minor lines. The grid is masked so it fades out down the section, which
	 * keeps it reading as light falling across a surface rather than as wallpaper.
	 * ------------------------------------------------------------------ */

	--afc-metal-sheen: linear-gradient(108deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 34%, rgba(255, 255, 255, 0.04) 43%, rgba(255, 255, 255, 0.10) 52%, rgba(255, 255, 255, 0) 72%);
	--afc-metal-brushed: repeating-linear-gradient(96deg, rgba(255, 255, 255, 0.055) 0 1px, rgba(0, 0, 0, 0.05) 1px 2px, rgba(255, 255, 255, 0) 2px 5px);
	--afc-metal-grid-minor: 48px;
	--afc-metal-grid-major: 192px;
	--afc-grid-line-minor: rgba(255, 255, 255, 0.075);
	--afc-grid-line-major: rgba(255, 255, 255, 0.19);
	--afc-grid-line-minor-light: rgba(24, 38, 78, 0.055);
	--afc-grid-line-major-light: rgba(24, 38, 78, 0.13);
	--afc-metal-edge: inset 0 1px 0 rgba(255, 255, 255, 0.18);
	--afc-metal-edge-strong: inset 0 1px 0 rgba(255, 255, 255, 0.34);
	--afc-metal-edge-light: inset 0 1px 0 rgba(255, 255, 255, 1);

	/* ---------------------------------------------------------------------
	 * Typography
	 * ------------------------------------------------------------------ */

	--afc-font-display: var(--wp--preset--font-family--display, "Archivo", "Archivo Fallback", "Helvetica Neue", Arial, sans-serif);
	--afc-font-body: var(--wp--preset--font-family--body, "Libre Franklin", "Libre Franklin Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);

	--afc-text-display: clamp(2.5rem, 1.55rem + 4.2vw, 5rem);
	--afc-text-h1: clamp(2.125rem, 1.5rem + 2.8vw, 3.75rem);
	--afc-text-h2: clamp(1.75rem, 1.36rem + 1.75vw, 2.75rem);
	--afc-text-h3: clamp(1.375rem, 1.2rem + 0.78vw, 1.875rem);
	--afc-text-h4: clamp(1.125rem, 1.05rem + 0.33vw, 1.3125rem);
	--afc-text-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	--afc-text-body: clamp(1rem, 0.975rem + 0.12vw, 1.0625rem);
	--afc-text-body-sm: 0.9375rem;
	--afc-text-eyebrow: 0.8125rem;
	--afc-text-button: 0.9375rem;
	--afc-text-nav: 0.9375rem;
	--afc-text-caption: 0.8125rem;
	--afc-text-metric: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);

	--afc-leading-tight: 1.08;
	--afc-leading-heading: 1.16;
	--afc-leading-body: 1.65;
	--afc-leading-snug: 1.4;

	--afc-tracking-display: -0.02em;
	--afc-tracking-heading: -0.01em;
	--afc-tracking-body: 0;
	--afc-tracking-eyebrow: 0.16em;
	--afc-tracking-button: 0.03em;

	--afc-weight-body: 400;
	--afc-weight-medium: 500;
	--afc-weight-semibold: 600;
	--afc-weight-bold: 700;

	/* Archivo carries a width axis. Expanded headline settings give the lettering an
	   architectural, signage like presence without a second font file. */
	--afc-display-width: 112;
	--afc-display-variation: "wdth" var(--afc-display-width);

	/* ---------------------------------------------------------------------
	 * Spacing
	 * ------------------------------------------------------------------ */

	--afc-space-3xs: var(--wp--preset--spacing--10, 0.25rem);
	--afc-space-2xs: var(--wp--preset--spacing--20, 0.5rem);
	--afc-space-xs: var(--wp--preset--spacing--30, 0.75rem);
	--afc-space-sm: var(--wp--preset--spacing--40, 1rem);
	--afc-space-md: var(--wp--preset--spacing--50, clamp(1.25rem, 1vw + 1rem, 1.75rem));
	--afc-space-lg: var(--wp--preset--spacing--60, clamp(1.75rem, 2vw + 1rem, 2.75rem));
	--afc-space-xl: var(--wp--preset--spacing--70, clamp(2.5rem, 3.5vw + 1rem, 4rem));
	--afc-space-2xl: var(--wp--preset--spacing--80, clamp(3.5rem, 5vw + 1rem, 6rem));

	--afc-section-y: clamp(3.5rem, 6vw, 7.5rem);
	--afc-section-y-tight: clamp(2.5rem, 4vw, 4.5rem);
	--afc-gap-grid: clamp(1.25rem, 2.2vw, 2.25rem);
	--afc-gap-tight: clamp(0.75rem, 1.2vw, 1.25rem);

	/* ---------------------------------------------------------------------
	 * Layout
	 * ------------------------------------------------------------------ */

	--afc-width-narrow: 46rem;
	--afc-width-content: 1180px;
	--afc-width-wide: 1520px;
	--afc-width-full: 100%;
	--afc-gutter: clamp(1.25rem, 4vw, 3rem);

	/* The header band is its own container, wider than the reading column and with
	   a tighter gutter. The utility strip carries four separate facts on one line,
	   which needs roughly 1150px, and the reading width cannot supply that. Both
	   header rows use these two values, so the strip and the logo below it stay on
	   the same left and right edges. */
	--afc-width-header: 1400px;
	--afc-gutter-header: clamp(1.25rem, 2vw, 2.25rem);

	/* ---------------------------------------------------------------------
	 * Structure
	 * ------------------------------------------------------------------ */

	--afc-radius-none: 0;
	--afc-radius-xs: 2px;
	--afc-radius-sm: 4px;
	--afc-radius-md: 8px;
	--afc-radius-pill: 999px;
	--afc-chamfer: 14px;

	--afc-border-hairline: 1px solid var(--afc-color-border);
	--afc-border-strong: 1px solid var(--afc-color-border-strong);
	--afc-rule-weight: 3px;

	--afc-shadow-xs: 0 1px 2px rgba(16, 28, 64, 0.06);
	--afc-shadow-sm: 0 2px 8px rgba(16, 28, 64, 0.08);
	--afc-shadow-md: 0 12px 28px rgba(16, 28, 64, 0.10);
	--afc-shadow-lg: 0 24px 60px rgba(16, 28, 64, 0.16);

	/* Layered depth. A single shadow reads as a sticker. Real depth comes from a
	   tight contact shadow that says the object is touching the surface, plus a
	   wide ambient one that says there is a room around it.
	 *
	 * Three named elevations, and the difference between them is deliberately large
	 * enough to see: the base surface, a panel resting on it, and a card resting on
	 * the panel should read as three distinct planes rather than as one plane with
	 * three slightly different edges. */
	--afc-depth-ring: 0 0 0 1px rgba(16, 28, 64, 0.08);
	--afc-depth-sm:
		0 1px 2px rgba(16, 28, 64, 0.07),
		0 4px 10px rgba(16, 28, 64, 0.07);
	--afc-depth-md:
		0 1px 2px rgba(16, 28, 64, 0.07),
		0 8px 18px rgba(16, 28, 64, 0.09),
		0 24px 44px rgba(16, 28, 64, 0.11);
	--afc-depth-lg:
		0 2px 4px rgba(16, 28, 64, 0.08),
		0 14px 28px rgba(16, 28, 64, 0.11),
		0 40px 72px rgba(16, 28, 64, 0.16);
	--afc-depth-xl:
		0 2px 6px rgba(16, 28, 64, 0.10),
		0 20px 40px rgba(16, 28, 64, 0.14),
		0 56px 96px rgba(16, 28, 64, 0.22);

	/* On a dark plane the ambient shadow has to go much darker to register at all,
	   and the object needs a light edge rather than a dark one. */
	--afc-depth-on-dark:
		0 2px 4px rgba(0, 0, 0, 0.45),
		0 18px 40px rgba(0, 0, 0, 0.42),
		0 44px 80px rgba(0, 0, 0, 0.34);
	--afc-depth-on-dark-lg:
		0 2px 6px rgba(0, 0, 0, 0.5),
		0 26px 52px rgba(0, 0, 0, 0.5),
		0 60px 110px rgba(0, 0, 0, 0.42);

	/* Glow, for the call action and for illuminated edges. Tinted with the brand
	   red rather than neutral black, so a lifted button looks warm not dirty. */
	--afc-glow-red: 0 10px 26px rgba(200, 30, 30, 0.38);
	--afc-glow-red-strong: 0 16px 40px rgba(226, 34, 34, 0.52);
	--afc-glow-blue: 0 14px 34px rgba(70, 104, 190, 0.34);

	/* How far a liftable element travels. Zeroed under reduced motion below. */
	--afc-lift: -6px;
	--afc-lift-sm: -3px;

	--afc-focus-ring-width: 3px;
	--afc-focus-ring-offset: 2px;

	/* ---------------------------------------------------------------------
	 * Layering
	 * ------------------------------------------------------------------ */

	--afc-z-base: 1;
	--afc-z-raised: 10;
	--afc-z-sticky-label: 40;
	--afc-z-floating-fab: 75;
	--afc-z-call-bar: 80;
	--afc-z-nav-panel: 90;
	--afc-z-header: 100;
	--afc-z-skip-link: 200;

	/* ---------------------------------------------------------------------
	 * Motion
	 * ------------------------------------------------------------------ */

	--afc-duration-instant: 90ms;
	--afc-duration-fast: 160ms;
	--afc-duration: 280ms;
	--afc-duration-slow: 520ms;
	--afc-duration-reveal: 720ms;

	--afc-ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
	--afc-ease-entrance: cubic-bezier(0.16, 0.84, 0.44, 1);
	--afc-ease-exit: cubic-bezier(0.4, 0, 1, 1);

	--afc-reveal-distance: 22px;
	--afc-stagger-step: 90ms;

	/* Components */
	--afc-logo-height: 48px;
	--afc-logo-height-compact: 34px;
	--afc-tap-target: 44px;
	--afc-call-bar-height: 62px;
	--afc-floating-fab-size: 58px;
}

/*
 * Reduced motion is honoured at the token level so that every component inherits
 * the change, including any component added later that forgets to ask.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--afc-duration-instant: 1ms;
		--afc-duration-fast: 1ms;
		--afc-duration: 1ms;
		--afc-duration-slow: 1ms;
		--afc-duration-reveal: 1ms;
		--afc-reveal-distance: 0px;
		--afc-stagger-step: 0ms;

		/* Depth stays, movement goes. A hover that changes shadow is still
		   informative without anything travelling across the screen. */
		--afc-lift: 0px;
		--afc-lift-sm: 0px;
	}
}