/*
 * FLO — design tokens (design/README.md §3, values checked against source/).
 *
 * Breakpoints cannot be custom properties. The whole theme uses exactly three:
 *
 *   @media (max-width: 1024px)   tablet: 3 columns → 2, split blocks → 1 column
 *   @media (max-width: 768px)    phone: 1 column, footer stacked
 *   @media (max-width: 480px)    small phone: smaller numbers and hero titles
 *
 * The header has its own (header.css, WP-10k): the burger below 1150px, where
 * the full menu no longer fits, and tighter gaps from 1150 to 1219px.
 *
 * Desktop (≥1025px) is the approved design and is the default (mobile overrides
 * only ever live inside max-width queries).
 */

:root {
	/* ---- Colours ---------------------------------------------------------- */
	--navy: #001B42;        /* dark sections, header, footer, headings on light */
	--navy-deep: #05224c;   /* panels and cards inside navy blocks */
	--navy-ink: #12325E;    /* text in light pills, secondary buttons, links */
	--gold: #F5A304;        /* buttons, accents, markers, icons and eyebrows on navy */
	--gold-hover: #e8990a;  /* primary button hover */
	--gold-text: #8A6207;   /* the only gold allowed as text on light backgrounds */
	--paper: #FBFAF7;       /* main light background; text on navy */
	--sand: #EEEAE1;        /* second light background */
	--cream: #F4F0E8;       /* third light background (homepage) */
	--white: #fff;          /* cards on sand */
	--line: #ECE6DA;        /* card borders, separators — light */
	--line-2: #E3DCCB;      /* — medium */
	--line-3: #DDD5C4;      /* — dark */
	--text: #33405A;        /* body text on light */
	--muted: #5B6474;       /* subtitles, captions */
	--muted-2: #6E6555;     /* form labels, warm captions */
	--error: #B3261E;       /* validation errors */
	--input-line: #E2DCCF;  /* input borders */

	/* Text and lines on navy (README §3.1: .82 / .66–.74 / .5–.55; .14 / .1) */
	--on-navy: rgba(255, 255, 255, .82);
	--on-navy-2: rgba(255, 255, 255, .7);
	--on-navy-3: rgba(255, 255, 255, .55);
	--on-navy-line: rgba(255, 255, 255, .14);
	--on-navy-line-2: rgba(255, 255, 255, .1);
	--glass: rgba(255, 255, 255, .045);
	--glass-line: rgba(255, 255, 255, .13);

	/* ---- Typography ------------------------------------------------------- */
	--font-display: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', Georgia, serif; /* the fallback face is metric-matched (fonts.css, WP-10b perf-06) */
	--font-sans: 'Hanken Grotesk', 'Hanken Grotesk Fallback', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	--font-khmer: 'Noto Sans Khmer', 'Khmer OS', 'Khmer UI', sans-serif;

	/* Hero H1 — Bricolage 800 */
	--fs-h1-hero: clamp(44px, 6.6vw, 86px);
	--lh-h1-hero: .98;
	--ls-h1-hero: -.035em;

	/* Inner-page H1 — Bricolage 800 */
	--fs-h1: clamp(36px, 5vw, 64px);
	--lh-h1: 1.02;
	--ls-h1: -.032em;

	/* H2 — Bricolage 800; large (section openers) and regular */
	--fs-h2-lg: clamp(28px, 3.8vw, 50px);
	--fs-h2: clamp(24px, 2.8vw, 36px);
	--lh-h2: 1.04;
	--ls-h2: -.028em;

	/* H3 cards — Bricolage 700, 18–24px */
	--fs-h3: 20px;
	--fs-h3-lg: 24px;
	--lh-h3: 1.18;
	--ls-h3: -.018em;

	/* Big numbers — Bricolage 800 */
	--fs-number: clamp(26px, 3vw, 40px);
	--fs-number-lg: clamp(40px, 5vw, 64px);
	--lh-number: 1;
	--ls-number: -.03em;

	/* Eyebrow — Hanken 700, uppercase */
	--fs-eyebrow: 11px;
	--lh-eyebrow: 1;
	--ls-eyebrow: .18em;

	/* Lead — Hanken 400 */
	--fs-lead: clamp(16px, 1.7vw, 21px);
	--lh-lead: 1.65;

	/* Body — Hanken 400, 15–16.5px */
	--fs-body: 16px;
	--fs-body-sm: 15px;
	--lh-body: 1.66;
	--measure: 56ch;
	--measure-narrow: 44ch;

	/* Small text and captions — Hanken 600, 12.5–14.5px */
	--fs-small: 13.5px;
	--fs-small-sm: 12.5px;
	--lh-small: 1.45;

	/* Buttons — Hanken 700, 13.5–15px */
	--fs-button: 15px;
	--fs-button-sm: 13.5px;

	/* Pills and tags — Hanken 700, 10.5–13.5px */
	--fs-pill: 12px;
	--fs-pill-sm: 10.5px;
	--ls-pill: .1em;
	--ls-pill-wide: .16em;

	/* ---- Spacing ---------------------------------------------------------- */
	--container: 1240px;
	--container-header: 1300px;
	--gutter: 24px;
	--section-y: clamp(64px, 8vw, 108px);      /* vertical rhythm of sections */
	--section-y-sm: clamp(48px, 6vw, 80px);    /* compact bands */
	--hero-top: clamp(80px, 9vw, 116px);       /* heroes: top padding */
	--gap-cards: clamp(18px, 2.2vw, 26px);
	--gap-split: clamp(30px, 4vw, 64px);
	--header-h: 72px;

	/* ---- Radii, shadows, focus ------------------------------------------- */
	--r-card-sm: 18px;
	--r-card: 20px;
	--r-card-lg: 26px;
	--r-photo: 20px;
	--r-input: 12px;
	--r-pill: 100px;
	--r-panel: 16px;

	--shadow-card: 0 24px 54px -42px rgba(0, 27, 66, .28);
	--shadow-photo: 0 30px 66px -48px rgba(0, 27, 66, .4);
	--shadow-gold: 0 16px 40px -14px rgba(245, 163, 4, .5);
	--shadow-panel: 0 30px 60px -28px rgba(0, 8, 24, .75);
	--shadow-header: 0 10px 30px -18px rgba(0, 27, 66, .4);

	--focus-ring: 2px solid var(--gold);
	--focus-offset: 2px;

	/* Medallions, rules, numbers (README §3.4) */
	--medallion: 52px;
	--medallion-sm: 44px;
	--medallion-lg: 62px;
	--medallion-dark-line: rgba(245, 163, 4, .46);
	--medallion-dark-fill: rgba(245, 163, 4, .1);
	--number-ghost: rgba(245, 163, 4, .32);
	--number-outline: #C9A14B;

	/* Motion */
	--ease: cubic-bezier(.2, .7, .2, 1);
	--t-fast: .16s;
	--t-base: .25s;
	--t-slow: .35s;
}

@media (max-width: 768px) {
	:root {
	}
}