/**
 * DA Digital design tokens.
 *
 * STRICT PALETTE. Exactly three colours exist:
 *
 *   navy      #061A32
 *   orange    #FF6500
 *   off-white #FAFAF7
 *
 * Everything else — every neutral, rule, tint and muted text colour — is
 * derived from those three by opacity or by mixing. There are no standalone
 * greys, and no other hue may be introduced anywhere in the theme.
 *
 * Components never reference a palette colour directly. They use the semantic
 * tokens (--da-bg, --da-text, --da-rule, --da-accent …), which is what lets a
 * section flip to dark by redefining eight values rather than restating every
 * rule.
 *
 * Breakpoints cannot be custom properties, so they are fixed and documented:
 *   1440  wide desktop      1200  desktop
 *   1024  small desktop     768   tablet
 *   480   phone             360   small phone
 */

/* Metric-matched fallbacks, one face per weight.
 *
 * The webfonts are self-hosted and preloaded, so in the normal case the real
 * face is ready for first paint and none of this is ever seen. These faces
 * cover the cold-cache case, where text does paint in the fallback first.
 *
 * Two things make this work that did not work before:
 *
 * 1. One face per weight. size-adjust is a per-@font-face descriptor, and
 *    Manrope runs from 101.6% of the fallback at 400 to 98.6% at 600, so a
 *    single figure is wrong for every weight but one.
 *
 * 2. The percentages are measured against the font local() actually resolves
 *    to. Chrome does not match local("SF Pro Text") inside @font-face, so the
 *    face silently falls through to Helvetica Neue; ratios computed against SF
 *    were therefore ~5% out and made the reflow worse, not better.
 *
 * Widths come from laying out a real nowrap span at each weight, not from
 * canvas measureText, and ascent/descent from the loaded faces. Verified
 * against live line-box counts at 1440/1024/768/390/320.
 */
@font-face {
	font-family: "Manrope Fallback";
	font-style: normal;
	font-weight: 400;
	src: local("Helvetica Neue"), local("Arial");
	size-adjust: 101.58%;
	ascent-override: 106.6%;
	descent-override: 30%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Manrope Fallback";
	font-style: normal;
	font-weight: 500;
	src: local("Helvetica Neue"), local("Arial");
	size-adjust: 103.37%;
	ascent-override: 106.6%;
	descent-override: 30%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Manrope Fallback";
	font-style: normal;
	font-weight: 600;
	src: local("Helvetica Neue"), local("Arial");
	size-adjust: 105.16%;
	ascent-override: 106.6%;
	descent-override: 30%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Manrope Fallback";
	font-style: normal;
	font-weight: 700;
	src: local("Helvetica Neue"), local("Arial");
	size-adjust: 106.94%;
	ascent-override: 106.6%;
	descent-override: 30%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "DM Sans Fallback";
	font-style: normal;
	font-weight: 400;
	src: local("Helvetica Neue"), local("Arial");
	size-adjust: 92.52%;
	ascent-override: 99.2%;
	descent-override: 31%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "DM Sans Fallback";
	font-style: normal;
	font-weight: 500;
	src: local("Helvetica Neue"), local("Arial");
	size-adjust: 94.79%;
	ascent-override: 99.2%;
	descent-override: 31%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "DM Sans Fallback";
	font-style: normal;
	font-weight: 600;
	src: local("Helvetica Neue"), local("Arial");
	size-adjust: 97.63%;
	ascent-override: 99.2%;
	descent-override: 31%;
	line-gap-override: 0%;
}

:root {
	/* The only three colours in the system ------------------------------- */
	--da-navy: #061a32;
	--da-orange: #ff6500;
	--da-off-white: #fafaf7;

	/* Navy at opacity, for use on light surfaces. */
	--da-navy-90: rgba(6, 26, 50, 0.9);
	--da-navy-72: rgba(6, 26, 50, 0.72);
	--da-navy-60: rgba(6, 26, 50, 0.6);
	--da-navy-40: rgba(6, 26, 50, 0.4);
	--da-navy-20: rgba(6, 26, 50, 0.2);
	--da-navy-14: rgba(6, 26, 50, 0.14);
	--da-navy-08: rgba(6, 26, 50, 0.08);
	--da-navy-04: rgba(6, 26, 50, 0.04);

	/* Off-white at opacity, for use on navy surfaces. */
	--da-light-72: rgba(250, 250, 247, 0.72);
	--da-light-56: rgba(250, 250, 247, 0.56);
	--da-light-20: rgba(250, 250, 247, 0.2);
	--da-light-14: rgba(250, 250, 247, 0.14);
	--da-light-08: rgba(250, 250, 247, 0.08);

	/* Orange at opacity. */
	--da-orange-40: rgba(255, 101, 0, 0.4);
	--da-orange-16: rgba(255, 101, 0, 0.16);

	/* Semantic tokens — light surface ------------------------------------ */
	--da-bg: var(--da-off-white);
	--da-bg-alt: color-mix(in srgb, var(--da-navy) 4%, var(--da-off-white));
	--da-bg-deep: var(--da-navy);
	--da-text: var(--da-navy);
	/* Faint was navy-40, which is 2.52:1 on off-white -- eyebrows, capability
	   tags, the marquee label and similar readable metadata all sat below AA.
	   It moves to navy-60 (4.59:1). Soft moves with it to navy-72 (6.89:1),
	   because soft was already navy-60 and leaving it there would collapse
	   secondary and faint into one value. The light surface now steps the same
	   way the dark one always has: 100 / 72 / 60 against 100 / 72 / 56. */
	--da-text-soft: var(--da-navy-72);
	--da-text-faint: var(--da-navy-60);
	--da-rule: var(--da-navy-14);
	--da-rule-strong: var(--da-navy-20);
	--da-accent: var(--da-orange);
	--da-accent-soft: var(--da-orange-40);
	/* Orange on off-white is only 2.8:1, so small accent text (section and
	   card ordinals) uses this darkened mix instead: ~4.9:1, still in palette. */
	--da-accent-ink: color-mix(in srgb, var(--da-orange) 70%, var(--da-navy));

	/* Mesh colours, read by signal-field.js from the section it renders in. */
	--da-mesh-line: 6, 26, 50;
	--da-mesh-node: 6, 26, 50;
	--da-mesh-trajectory: 255, 101, 0;

	/* Typography --------------------------------------------------------- */
	/*
	 * Manrope for display and headings: slightly condensed, geometric, with
	 * tight apertures that hold up at very large sizes.
	 * DM Sans for body and UI: a wider, quieter companion that stays readable
	 * at small sizes. Two families only, both with full fallback stacks.
	 */
	--da-font-display: "Manrope", "Manrope Fallback", "Helvetica Neue", Arial, sans-serif;
	--da-font: "DM Sans", "DM Sans Fallback", -apple-system, BlinkMacSystemFont,
		"Segoe UI", "Helvetica Neue", Arial, sans-serif;

	/* Scale. Hierarchy comes from weight, tracking and measure as much as
	   from size, so each step carries its own settings. */
	--da-size-display-xl: clamp(2.75rem, 5.2vw, 4.75rem);
	--da-size-mega: clamp(3.5rem, 13vw, 11rem);
	--da-size-display: clamp(2.25rem, 4.6vw, 3.875rem);
	--da-size-h1: clamp(2.125rem, 4.6vw, 3.5rem);
	--da-size-h2: clamp(1.625rem, 3.1vw, 2.625rem);
	--da-size-h3: clamp(1.1875rem, 1.7vw, 1.5rem);
	--da-size-h4: clamp(1.0625rem, 1.2vw, 1.1875rem);
	--da-size-body-lg: clamp(1.0625rem, 1.25vw, 1.1875rem);
	--da-size-body: 1rem;
	--da-size-small: 0.875rem;
	--da-size-micro: 0.75rem;
	--da-size-nav: 0.9375rem;
	--da-size-button: 0.9375rem;
	--da-size-metric: clamp(2.75rem, 6vw, 4.5rem);

	/* 0.99 is the floor, not a preference: Manrope's ink spans 0.735em above
	   the baseline and 0.255em below it at every weight the site uses, so any
	   leading under 0.99 puts a descender through the ascender beneath it.
	   0.96 did exactly that -- "experiences" over "built" on the hero overlapped
	   by 2.3px at 76px. 1.04 is the smallest value that still separates clearly
	   at the bottom of the clamp, and keeps the display scale tight. */
	--da-leading-display: 1.04;
	--da-leading-heading: 1.08;
	--da-leading-tight: 1.32;
	--da-leading-body: 1.62;

	--da-tracking-display: -0.035em;
	--da-tracking-heading: -0.022em;
	--da-tracking-body: -0.006em;
	--da-tracking-eyebrow: 0.16em;
	--da-tracking-metric: -0.04em;

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

	/* Spacing ------------------------------------------------------------ */
	--da-space-3xs: 0.25rem;
	--da-space-2xs: 0.5rem;
	--da-space-xs: 0.75rem;
	--da-space-sm: 1rem;
	--da-space-md: 1.5rem;
	--da-space-lg: 2rem;
	--da-space-xl: 3rem;
	--da-space-2xl: 4rem;
	--da-space-3xl: 6rem;
	--da-space-4xl: 8rem;

	/* Trimmed from 9rem/6rem: at the top of the clamp this was 136px above and
	   below every section, which on the shorter ones was a third of their whole
	   height. The rhythm is kept, the dead band is not. */
	--da-section-y: clamp(3.5rem, 7.5vw, 7rem);
	--da-section-y-tight: clamp(2.5rem, 5vw, 5rem);

	/* Layout ------------------------------------------------------------- */
	--da-container: 1280px;
	--da-container-narrow: 860px;
	--da-container-text: 68ch;
	--da-gutter: clamp(1.25rem, 4vw, 3rem);

	/* Decorative mesh intensity. The signal field is one engine with two
	   topologies, tuned separately so either can be adjusted without the
	   other: presets named web* are the organic spider-web, the rest are the
	   structural lattice. These scale the whole layer -- lines, nodes and
	   trajectory -- so the mesh sits behind content at rest while every
	   interaction (pointer pull, spring, ripple, breathing, parallax) keeps
	   its full range. */
	--da-grid-opacity: 0.4;
	--da-web-opacity: 0.4;

	--da-header-h: 5rem;
	--da-header-h-compact: 3.75rem;

	/* Borders & radii ---------------------------------------------------- */
	/* Deliberately near-square: rounded cards are not part of this system. */
	--da-radius-sm: 2px;
	--da-radius-md: 3px;
	--da-radius-pill: 999px;
	--da-border: 1px;
	--da-border-strong: 2px;

	/* Motion ------------------------------------------------------------- */
	--da-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--da-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
	--da-dur-fast: 160ms;
	--da-dur: 280ms;
	--da-dur-slow: 560ms;
	--da-dur-reveal: 900ms;

	/* Focus -------------------------------------------------------------- */
	--da-focus-width: 2px;
	--da-focus-offset: 3px;
	--da-focus-color: var(--da-orange);

	/* Stacking ----------------------------------------------------------- */
	--da-z-field: 0;
	--da-z-content: 1;
	--da-z-header: 100;
	--da-z-menu: 200;
	--da-z-skip: 300;
}

/**
 * Dark surface.
 *
 * Redefines the same semantic tokens rather than restating any component rule,
 * so every component already knows how to render on navy. Nesting is supported:
 * a light block inside a dark section just sets .da-surface-light.
 */
.da-invert,
.da-surface-dark {
	--da-bg: var(--da-navy);
	--da-bg-alt: color-mix(in srgb, var(--da-off-white) 6%, var(--da-navy));
	--da-bg-deep: color-mix(in srgb, var(--da-off-white) 3%, var(--da-navy));
	--da-text: var(--da-off-white);
	--da-text-soft: var(--da-light-72);
	--da-text-faint: var(--da-light-56);
	--da-rule: var(--da-light-14);
	--da-rule-strong: var(--da-light-20);

	--da-mesh-line: 250, 250, 247;
	--da-mesh-node: 250, 250, 247;
	/* On navy the undarkened orange already clears AA. */
	--da-accent-ink: var(--da-accent);

	background-color: var(--da-bg);
	color: var(--da-text);
}

.da-surface-light {
	--da-bg: var(--da-off-white);
	--da-bg-alt: color-mix(in srgb, var(--da-navy) 4%, var(--da-off-white));
	--da-text: var(--da-navy);
	/* Faint was navy-40, which is 2.52:1 on off-white -- eyebrows, capability
	   tags, the marquee label and similar readable metadata all sat below AA.
	   It moves to navy-60 (4.59:1). Soft moves with it to navy-72 (6.89:1),
	   because soft was already navy-60 and leaving it there would collapse
	   secondary and faint into one value. The light surface now steps the same
	   way the dark one always has: 100 / 72 / 60 against 100 / 72 / 56. */
	--da-text-soft: var(--da-navy-72);
	--da-text-faint: var(--da-navy-60);
	--da-rule: var(--da-navy-14);
	--da-rule-strong: var(--da-navy-20);

	--da-mesh-line: 6, 26, 50;
	--da-mesh-node: 6, 26, 50;

	background-color: var(--da-bg);
	color: var(--da-text);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--da-dur-fast: 1ms;
		--da-dur: 1ms;
		--da-dur-slow: 1ms;
		--da-dur-reveal: 1ms;
	}
}