/**
 * Design tokens.
 *
 * Sources, in precedence order:
 * 1. docs/figma-homepage-usage.json  (ground truth of what the homepage uses)
 * 2. docs/figma-color-tokens.json    (full color set, hex exact)
 * 3. docs/figma-text-styles.json     (full text style set)
 * 4. docs/typography-design-system.md (line heights where Figma reports auto)
 *
 * Never hardcode a value that has a token here.
 *
 * NOTE on Tailwind drift: #111827 and #E5E7EB appear in the Figma file but are
 * NOT tokens on purpose. Where the design shows #111827 use --color-heading-text
 * or --color-body-text; where it shows #E5E7EB use --color-border-subtle.
 * They get fixed in Figma separately.
 */

:root {
	/* ------------------------------------------------------------------
	 * Colors (figma-color-tokens.json, hex exact)
	 * ------------------------------------------------------------------ */

	/* Surfaces */
	--color-page-bg: #F7F8FA;
	--color-surface-card: #EEF0F3;
	--color-surface-muted: #F0F1F4;
	--color-surface-dark: #16181C;
	--color-surface-darkest: #0A0B0D;
	--color-surface-dark-card: #2A2D33;
	--color-surface-white: #FFFFFF;

	/* Text */
	--color-heading-text: #0A0B0D;
	--color-heading-text-on-dark: #FFFFFF;
	--color-body-text: #2A2D33;
	--color-body-text-on-dark: #D9DCE1;
	--color-text-secondary: #5B6068;
	--color-text-secondary-on-dark: #8A8F98;
	--color-text-tertiary: #8A8F98;
	--color-text-disabled: #B8BCC3;

	/* Links */
	--color-link-text: #B8390F;
	--color-link-text-hover: #DD4814;
	--color-link-text-on-dark: #FF6C15;
	--color-link-text-on-dark-hover: #FF8A47;

	/* Buttons: primary */
	--color-button-primary-bg: #DD4814;
	--color-button-primary-bg-hover: #FF6C15;
	--color-button-primary-bg-active: #C2400F;
	--color-button-primary-text: #FFFFFF;

	/* Buttons: secondary */
	--color-button-secondary-bg: #FFFFFF00; /* Figma: #FFFFFF at alpha 0 (transparent) */
	--color-button-secondary-border: #2A2D33;
	--color-button-secondary-text: #0A0B0D;
	--color-button-secondary-hover-bg: #0A0B0D;
	--color-button-secondary-hover-text: #FFFFFF;
	--color-button-secondary-border-on-dark: #5B6068;
	--color-button-secondary-text-on-dark: #FFFFFF;

	/* Buttons: text */
	--color-button-text-color: #0A0B0D;
	--color-button-text-color-hover: #DD4814;
	--color-button-text-color-on-dark: #FFFFFF;
	--color-button-text-color-on-dark-hover: #FF6C15;

	/* Borders */
	--color-border-subtle: #D9DCE1;
	--color-border-strong: #2A2D33;
	--color-border-on-dark: #2A2D33;
	--color-border-on-image: #FFFFFF1F; /* Figma: #FFFFFF at alpha 0.12 */

	/* Accent (max ~3% of any screen) */
	--color-accent: #DD4814;
	--color-accent-hover: #FF6C15;
	--color-accent-tint-bg: #FFF1EA;

	/* Brand gradient (decorative shapes). gradient-end equals accent-hover
	   but carries its own semantic name on purpose. */
	--color-gradient-start: #FF3413;
	--color-gradient-end: #FF6C15;

	/* Inputs and forms */
	--color-input-bg: #FFFFFF;
	--color-input-bg-on-dark: #16181C;
	--color-input-border: #D9DCE1;
	--color-input-border-hover: #8A8F98;
	--color-input-border-focus: #DD4814;
	--color-input-text: #0A0B0D;
	--color-input-placeholder: #8A8F98;
	--color-form-label-text: #2A2D33;

	/* Intentional alpha tokens (figma-homepage-usage.json _flags) */
	--color-text-on-dark-alpha: #FFFFFFA6;
	--color-surface-glass: #FFFFFF14;
	--color-text-on-dark-ghost: #FFFFFF59;

	/* ------------------------------------------------------------------
	 * Logo treatment
	 * ------------------------------------------------------------------ */

	/* Weight match for the solid-plate escape hatch: a masked logo is a flat
	   fill of text-secondary-on-dark, so a grayscale image has to sit back to
	   read at a comparable weight beside it. Shared by the clients grid and
	   the marquee. */
	--logo-solid-opacity: 0.55;

	/* ------------------------------------------------------------------
	 * Motion (house style, per the project's motion conventions)
	 * ------------------------------------------------------------------ */
	--motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
	/* Interaction curve: hover/press choreography (btn-primary). Distinct from
	   the reveal curve above, which stays for entrances. */
	--motion-ease-interaction: cubic-bezier(0.625, 0.05, 0, 1);

	/* ------------------------------------------------------------------
	 * Font families
	 * ------------------------------------------------------------------ */
	--font-heading: "Archivo", system-ui, Arial, sans-serif;
	--font-body: "IBM Plex Sans", system-ui, Arial, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

	/* ------------------------------------------------------------------
	 * Base type scale
	 * Sizes/weights/letter-spacing per figma-homepage-usage.json (wins),
	 * h1 + body-sm per figma-text-styles.json. Line heights: real Figma
	 * values where present, typography-design-system.md where Figma = auto.
	 * ------------------------------------------------------------------ */

	/* display: Archivo 800, 104px / 106px, -3% (usage file) */
	--type-display-size: 6.5rem;
	--type-display-line: 1.0192;
	--type-display-spacing: -0.03em;
	--type-display-weight: 800;

	/* h1: Archivo 700, 56px (text styles); line 1.05 (MD, Figma auto); spacing 0 (text styles) */
	--type-h1-size: 3.5rem;
	--type-h1-line: 1.05;
	--type-h1-spacing: 0em;
	--type-h1-weight: 700;

	/* h2: Archivo 700, 40px / 46px, 0 (usage file) */
	--type-h2-size: 2.5rem;
	--type-h2-line: 1.15;
	--type-h2-spacing: 0em;
	--type-h2-weight: 700;

	/* h3: Archivo 600, 28px, 0; line 1.2 (MD, Figma auto) */
	--type-h3-size: 1.75rem;
	--type-h3-line: 1.2;
	--type-h3-spacing: 0em;
	--type-h3-weight: 600;

	/* h4: Archivo 600, 20px, 0; line 1.3 (MD, Figma auto) */
	--type-h4-size: 1.25rem;
	--type-h4-line: 1.3;
	--type-h4-spacing: 0em;
	--type-h4-weight: 600;

	/* body-lg: Plex Sans 400, 20px / 29px, 0 (usage file) */
	--type-body-lg-size: 1.25rem;
	--type-body-lg-line: 1.45;
	--type-body-lg-spacing: 0em;
	--type-body-lg-weight: 400;

	/* body: Plex Sans 400, 16px, 0; line 1.6 (MD, Figma auto) */
	--type-body-size: 1rem;
	--type-body-line: 1.6;
	--type-body-spacing: 0em;
	--type-body-weight: 400;

	/* card-body: Plex Sans 400, 15px, line normal.
	   MEASURED from the 22 rules that were already writing 0.9375rem out as a
	   literal, not chosen. They agree on exactly one thing:

	     size    0.9375rem   22 of 22
	     line    normal      12 of 22, and every one of them is card or
	                         description copy. The other ten are a different
	                         type role wearing the same size, and are listed in
	                         the commit rather than converted here.
	     weight  400         14 of 22. The rest are 500 (megamenu item title,
	                         the mono data value) and 600 (carousel slide CTA),
	                         which stay declared where they are: a heavier
	                         weight at this size is a deliberate variant.
	     spacing none        0 of 22 declare one.

	   --spacing therefore has NO source in the existing uses. It is defined for
	   parity with every other type set in this file and is deliberately applied
	   nowhere: adding letter-spacing where none was declared would be a change
	   of appearance, not a tokenisation, and 0em would only look like a source.

	   Deliberately not redeclared in the mobile block below, which already
	   records that card-body stays 15px there by ruling. */
	--type-card-body-size: 0.9375rem;
	--type-card-body-line: normal;
	--type-card-body-spacing: 0em;
	--type-card-body-weight: 400;

	/* body-sm: Plex Sans 600, 14px, 0 (text styles; weight conflicts with MD's 400, Figma wins); line 1.5 (MD) */
	--type-body-sm-size: 0.875rem;
	--type-body-sm-line: 1.5;
	--type-body-sm-spacing: 0em;
	--type-body-sm-weight: 600;

	/* label: Plex Mono 500, 12px / 16px, +22%, UPPERCASE (usage file) */
	--type-label-size: 0.75rem;
	--type-label-line: 1.3333;
	--type-label-spacing: 0.22em;
	--type-label-weight: 500;

	/* mono-spec: Plex Mono 500, 14px, 0 (usage file); line 1.5 (MD, Figma auto) */
	--type-mono-spec-size: 0.875rem;
	--type-mono-spec-line: 1.5;
	--type-mono-spec-spacing: 0em;
	--type-mono-spec-weight: 500;

	/* btn-primary: Plex Sans 600, 14px, LS 0, line normal. Designer ruling:
	   ALL primary buttons are 14px/600; Figma's 15px btn-primary text style is
	   drift and will be fixed there. The header nav-cta shares these values. */
	--type-btn-primary-size: 0.875rem;
	--type-btn-primary-line: normal;
	--type-btn-primary-spacing: 0em;
	--type-btn-primary-weight: 600;

	/* stat-xl: Archivo 800, 88px, line normal. Tokenised for the responsive
	   pass (it drops to 48px); the mono unit beside it is a one-off. */
	--type-stat-xl-size: 5.5rem;

	/* ------------------------------------------------------------------
	 * Layout (authoritative designer values).
	 * 1440 design width: 64 + 1312 + 64. Standard sections: 100px top and
	 * bottom padding, content in the container, no outer inset, full-width
	 * backgrounds where a section has one.
	 * Hero exception: the hero band is inset 6px from the viewport edges
	 * on all sides (page background visible in the gap, boxed look), caps
	 * at 1920px and centers on ultrawide screens; the same content
	 * container applies inside it.
	 * ------------------------------------------------------------------ */
	--container-max: 82rem; /* 1312px */
	--container-pad: 4rem; /* 64px */
	--section-pad-y: 6.25rem; /* 100px */
	--page-inset: 6px; /* band inset, deliberately px (hairline frame) */
	--band-max: 120rem; /* 1920px page band cap (.band component, shape anchoring) */
}

/* --------------------------------------------------------------------
 * Responsive scale: ONE layout switch at 1024. Tablet and mobile share
 * the same layout per the designer, so there is no second breakpoint.
 *
 * Only sizes are redeclared: line heights are unitless ratios, so they
 * scale with the size automatically and stay proportional. Everything
 * else (spacing, containers) is redefined here rather than overridden
 * per section, so a section's own CSS never has to know about widths.
 * -------------------------------------------------------------------- */

@media (max-width: 1024px) {
	:root {
		--container-pad: 1rem; /* 16px */
		--section-pad-y: 4rem; /* 64px */

		--type-display-size: 2.75rem; /* 104 -> 44 */
		--type-h1-size: 2.25rem; /* 56 -> 36 */
		--type-h2-size: 1.875rem; /* 40 -> 30 */
		--type-h3-size: 1.5rem; /* 28 -> 24 */
		--type-h4-size: 1.125rem; /* 20 -> 18 */
		--type-body-lg-size: 1.0625rem; /* 20 -> 17 */
		--type-stat-xl-size: 3rem; /* 88 -> 48 */
		/* body 16, card-body 15, label 12: unchanged by ruling. */
	}
}