/*
Design tokens for the Airworthy website.
Every colour, font, size and easing used on the site comes from this file.
Last task: T-030 (hero photo treatment tokens). Date: 2026-10-21.
Breakpoints (cannot be variables): 480, 760, 1024, 1200, 1440 px
*/

:root {
	/* Colour */
	--paper: #EDEAE3;
	--card: #F7F5F0;
	--ink: #0B0B0A;
	--char: #1C1B19;
	--rule: #2A2824;
	--muted: #5F5B54;
	--mist: #9C978E;
	--stone: #C9C5BC;
	--sand: #D9D5CC;
	--signal: #FF4F00;
	--signal-text: #B33800;
	/* Focus ring: --signal-text is 5.0:1 on paper, --signal is 2.74:1 (under the 3:1 WCAG 1.4.11 asks for).
	   Dark surfaces switch it back to --signal in base.css. Last task: T-083. */
	--focus: var(--signal-text);
	--field-line: #7A766E;
	--dot-off: #45423C;
	--wait: #A8A296;

	/* Fonts. The display font is --font-display, not --display: Elementor 4 sets --display: flex on every
	   container, which overrides a font token of that name inside the container. Last task: T-013. */
	--font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
	--body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--voice: 'Newsreader', Georgia, 'Times New Roman', serif;

	/* Layout */
	--pad: clamp(16px, 4.45vw, 64px);
	--section-y: clamp(72px, 10vw, 120px);

	/* Type sizes */
	--fs-hero-phone: clamp(52px, 15.4vw, 118px);
	--fs-hero-desktop: clamp(140px, 15.2vw, 224px);
	--fs-section: clamp(52px, 6.7vw, 96px);
	--fs-section-lg: clamp(60px, 10.5vw, 136px);
	--fs-closing: clamp(68px, 13vw, 184px);
	--fs-subline: clamp(28px, 7.4vw, 38px);
	--fs-step: 40px;
	--fs-step-wide: 46px;
	--fs-label: 15px;
	--fs-body: 17px;
	--fs-button: 21px;
	--fs-voice: clamp(22px, 2.3vw, 30px);

	/* Line heights */
	--lh-hero: 0.86;
	--lh-section: 0.88;
	--lh-closing: 0.84;
	--lh-body: 1.5;

	/* Motion */
	--ease-out: cubic-bezier(.23, 1, .32, 1);
	--ease-io: cubic-bezier(.77, 0, .175, 1);
	--t-press: 160ms;
	--t-state: 380ms;
	--t-message: 320ms;

	/* Hero photo treatment, one filter and one shade per phase, from the table in
	   05-interactions-and-motion.md section 1. Used only by .aw-hero. Last task: T-030. */
	--hero-filter-sunrise: grayscale(1) contrast(1.05) brightness(.85);
	--hero-shade-sunrise: linear-gradient(180deg, rgba(255, 120, 60, .34) 0%, rgba(11, 11, 10, .42) 62%, rgba(11, 11, 10, .72) 100%);
	--hero-filter-daytime: grayscale(1) contrast(1.1) brightness(.95);
	--hero-shade-daytime: linear-gradient(180deg, rgba(11, 11, 10, .42) 0%, rgba(11, 11, 10, .42) 60%, rgba(11, 11, 10, .72) 100%);
	--hero-filter-sunset: grayscale(1) contrast(1.1) brightness(.72);
	--hero-shade-sunset: linear-gradient(180deg, rgba(255, 79, 0, .36) 0%, rgba(80, 26, 6, .42) 55%, rgba(11, 11, 10, .82) 100%);
	--hero-filter-night: grayscale(1) contrast(1.15) brightness(.62);
	--hero-shade-night: linear-gradient(180deg, rgba(10, 14, 32, .45) 0%, rgba(11, 11, 10, .5) 55%, rgba(11, 11, 10, .72) 100%);

	color-scheme: light;
}

/* Fonts: self-hosted woff2, latin subset, SIL Open Font License.
   Files in assets/fonts/. Weights as listed in 02-brand-and-design-system.md.
   Last task: T-011. Date: 2026-10-21. */

@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/barlow-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/barlow-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/barlow-600.woff2') format('woff2');
}

@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/barlow-condensed-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/barlow-condensed-600.woff2') format('woff2');
}

@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/barlow-condensed-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/barlow-condensed-800.woff2') format('woff2');
}

@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/newsreader-300.woff2') format('woff2');
}

@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/newsreader-300.woff2') format('woff2');
}

@font-face {
	font-family: 'Newsreader';
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/newsreader-300-italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Newsreader';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/newsreader-300-italic.woff2') format('woff2');
}