/*
 * Bohardien design tokens.
 *
 * Extracted from the Claude Design canvas, 10/09/2026. Every value here comes
 * from the design; the only derived values are marked DERIVED and listed in the
 * Stage 1 gate report.
 *
 * The design is dark-only. There is no light mode and no theme toggle.
 */

:root {
	color-scheme: dark;

	/* Page ground ---------------------------------------------------------- */
	--bg: #0E1D30;
	--bg-deep: #0A1E32;
	--fg: #FFFFFF;
	--fg-2: #D2DCE6;
	--ph: rgba(210, 220, 230, 0.62);
	--faint: rgba(210, 220, 230, 0.40);

	/* Accent --------------------------------------------------------------- */
	--accent: #508CF0;
	--accent-fg: #0A1E32;
	--link: #508CF0;
	--kicker: #C3AFA0;

	/* Lines and surfaces --------------------------------------------------- */
	--line: rgba(210, 220, 230, 0.18);
	--line-soft: rgba(210, 220, 230, 0.14);
	--line-strong: rgba(210, 220, 230, 0.32);
	--card-line: rgba(210, 220, 230, 0.28);
	--well: rgba(210, 220, 230, 0.06);
	--lift: rgba(210, 220, 230, 0.05);

	/* Panel: the inverted band used for CTAs and feature sections ---------- */
	--panel: #0E1D30;
	--panel-fg: #FFFFFF;
	--panel-fg-2: #D2DCE6;
	--panel-line: rgba(210, 220, 230, 0.18);
	--panel-line-strong: rgba(210, 220, 230, 0.32);
	--panel-lift: rgba(210, 220, 230, 0.05);
	--panel-well: rgba(210, 220, 230, 0.08);
	--panel-card: rgba(210, 220, 230, 0.055);
	--panel-card-hover: rgba(210, 220, 230, 0.10);
	--panel-field: rgba(210, 220, 230, 0.07);
	--panel-field-fg: #FFFFFF;
	--panel-field-ph: rgba(210, 220, 230, 0.60);
	--panel-kicker: #C3AFA0;

	/* Utility bar: the one light-on-dark inversion ------------------------- */
	--util: #D2DBE5;
	--util-fg: #0A1E32;
	--util-fg-2: #2E4258;
	--util-line: rgba(10, 30, 50, 0.20);

	/* Header and incidentals ----------------------------------------------- */
	--hdr: rgba(14, 29, 48, 0.90);
	--avatar-ring: rgba(210, 220, 230, 0.45);

	/* Type families -------------------------------------------------------- */
	--font-sans: "Host Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-serif: "Newsreader", Georgia, "Times New Roman", serif;

	/* Type scale, fluid. clamp() values kept verbatim from the design ------ */
	--fs-display: clamp(36px, 4.6vw, 64px);
	--fs-h1: clamp(32px, 3.6vw, 52px);
	--fs-h2: clamp(30px, 3.2vw, 46px);
	--fs-h3: clamp(26px, 2.6vw, 36px);
	--fs-h4: clamp(22px, 2.2vw, 29px);
	--fs-h5: clamp(19px, 1.5vw, 23px);

	/* Type scale, static. Normalised from 40 loose values in the design.
	   16/16.5/17 collapse to --fs-body-sm; 14/14.5/15 to --fs-sm;
	   11/11.5/12 to --fs-3xs. */
	--fs-xl: 24px;
	--fs-lg: 20px;
	--fs-body: 17.5px;
	--fs-body-sm: 16.5px;
	--fs-sm: 14.5px;
	--fs-xs: 13px;
	--fs-2xs: 12.5px;
	--fs-3xs: 11.5px;

	/* Weights. The design is light-first: 300 is the workhorse. ------------ */
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;

	/* Line heights --------------------------------------------------------- */
	--lh-display: 1.08;
	--lh-heading: 1.18;
	--lh-tight: 1.22;
	--lh-snug: 1.28;
	--lh-ui: 1.55;
	--lh-body-sm: 1.65;
	--lh-body: 1.72;

	/* Tracking. Negative on headings, wide on kickers. -------------------- */
	--ls-display: -0.018em;
	--ls-heading: -0.015em;
	--ls-tight: -0.012em;
	--ls-body: -0.01em;
	--ls-kicker: 0.08em;
	--ls-kicker-wide: 0.16em;

	/* Radii. Pills dominate: 81 of 146 uses. ------------------------------ */
	--radius-pill: 999px;
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 14px;

	/* Layout --------------------------------------------------------------- */
	--container: 1800px;
	--gutter: clamp(20px, 4vw, 48px); /* DERIVED */
	--measure: 72ch;
	--measure-tight: 68ch;
	--measure-intro: 52ch;
	--measure-label: 20ch;

	/* Page hero titles. 20ch was the original label measure, but German compound
	   nouns overrun it: "Nebenkostenabrechnungen" alone is 726px at the display
	   size against a 725px column, which strands the preceding word on its own
	   line. 22ch is the smallest measure that resolves it. Added 16/09/2026. */
	--measure-title: 22ch;

	/* Section rhythm ------------------------------------------------------- */
	--section-y: 110px;
	--section-y-hero: 128px;
	--section-y-hero-end: 116px;
	--section-y-alt: 104px;
	--section-y-alt-end: 112px;

	/* Gaps ----------------------------------------------------------------- */
	--gap-2xs: 4px;
	--gap-xs: 10px;
	--gap-sm: 14px;
	--gap-md: 20px;
	--gap-lg: 24px;
	--gap-xl: 40px;
	--gap-2xl: 56px;
	--gap-3xl: 72px;

	/* Grid patterns lifted from the design -------------------------------- */
	--split-editorial: minmax(0, 0.85fr) minmax(0, 1.15fr);
	--split-even: minmax(0, 1fr) minmax(0, 1fr);
	--cards-2up: repeat(auto-fit, minmax(clamp(280px, calc(50% - 29px), 100%), 1fr));
	/* auto-FILL here, unlike its two neighbours. The difference shows only when
	   a row holds fewer cards than it has columns: auto-fit collapses the empty
	   tracks and stretches the survivors, so filtering the case study index down
	   to one result produced a single card the full width of the page. auto-fill
	   keeps the empty tracks, so one or two results keep a card's proportions
	   and sit in the first columns.

	   The floor is unchanged, so the column count is unchanged: 3 while
	   33.333% - 22px holds, then 2, then 1. auto-fill cannot produce a fourth
	   track, because below the width where the clamp bottoms out at 260px there
	   is no longer room for three.

	   2up is deliberately left on auto-fit: the contact grid relies on the
	   collapse when a page has no enquiry form. */
	--cards-3up: repeat(auto-fill, minmax(clamp(260px, calc(33.333% - 22px), 100%), 1fr));
	--cards-4up: repeat(auto-fit, minmax(clamp(150px, calc(25% - 21px), 100%), 1fr));

	/* Motion and focus. Both DERIVED: the design specifies neither. -------- */
	--ease: cubic-bezier(0.2, 0.6, 0.2, 1); /* DERIVED */
	--dur: 180ms; /* DERIVED */
	--focus-ring: 0 0 0 3px rgba(80, 140, 240, 0.45); /* DERIVED from --accent */
}

/* ===========================================================================
 * Stage 4 additions and corrections.
 *
 * Written after 39 adversarial component reviews flagged "hardcoded value" 78
 * times. Most of those were the component being right and this file being
 * incomplete. Three of the corrections below are errors in the FIRST version of
 * this block, caught by comparing it against the design a second time.
 * Counts are occurrences in the design markup.
 * ======================================================================== */
:root {
	/* Two-column splits. The design uses four ratios, not two. ------------ */
	--split-wide: minmax(0, 1fr) minmax(0, 0.9fr);      /* 9x, paired with 80px */
	--split-lean: minmax(0, 1fr) minmax(0, 1.1fr);      /* 3x, paired with the fluid gap */
	--gap-4xl: 80px;                                     /* 9x, the --split-wide partner */
	--gap-fluid: clamp(40px, 5vw, 80px);                 /* 3x */

	/* -----------------------------------------------------------------------
	 * Stage 5 additions. Two values the design uses that the Stage 1 sweep
	 * did not pick up, found while building the article template. Counted in
	 * reference/bohardien-design-page.html before adding, per convention 2.
	 * -------------------------------------------------------------------- */
	--measure-prose: 78ch;   /* long-form body column, 4 uses */
	--radius-figure: 10px;   /* media dropped inside body copy, 4 uses */
	--chip-scrim: rgba(14, 29, 48, 0.88); /* --panel at 88%, behind the map chips, 2 uses */
	/* Stage 6. NOT design values: the design draws no form error state, and a
	   real form needs one. 8.53:1 on --bg, and every message carries text as
	   well as colour, so neither 1.4.3 nor 1.4.1 relies on the hue alone.
	   Flagged in decisions.md for the designer to confirm or replace. */
	--error: #FF9F91;
	--error-wash: rgba(255, 159, 145, 0.10);

	/* Heroes.
	   CORRECTION: the first version of this block exposed two stops of the PAGE
	   hero wash as generic --hero-wash-mid and --hero-wash-edge. The home hero
	   then used them and rendered in the wrong colours. The two heroes share
	   nothing but a min-height: different filter, different blend colour,
	   different wash angle, different stops. Each now gets complete gradients
	   so they cannot be confused again. ---------------------------------- */
	--hero-min-height: min(84vh, 860px);

	/* Page hero, design sections 10, 36 and 47. Blends towards #12395E. */
	--page-hero-filter: brightness(0.66) saturate(0.75) contrast(1.06);   /* 18x */
	--page-hero-tint: #12395E;                                            /* 22x, at mix-blend-mode: color */
	--page-hero-wash: linear-gradient(
		90deg,
		rgba(10, 30, 50, 0.94) 0%,
		rgba(10, 30, 50, 0.86) 32%,
		rgba(13, 38, 64, 0.7) 56%,
		rgba(16, 48, 80, 0.54) 78%,
		rgba(18, 54, 90, 0.42) 100%
	);
	--page-hero-vignette: linear-gradient(
		180deg,
		rgba(7, 16, 28, 0.4) 0%,
		rgba(7, 16, 28, 0.05) 45%,
		rgba(7, 16, 28, 0.5) 100%
	);

	/* Home hero, design section 0. Blends towards --bg, not the tint, with a
	   lighter filter and a 100deg wash. */
	--home-hero-filter: brightness(0.82) saturate(0.78) contrast(1.03);
	--home-hero-tint: #0E1D30;
	--home-hero-wash: linear-gradient(
		100deg,
		rgba(14, 29, 48, 0.93) 0%,
		rgba(14, 29, 48, 0.86) 40%,
		rgba(14, 29, 48, 0.6) 58%,
		rgba(14, 29, 48, 0.28) 74%,
		rgba(14, 29, 48, 0.06) 92%
	);
	--home-hero-vignette: linear-gradient(
		180deg,
		rgba(14, 29, 48, 0.5) 0%,
		rgba(14, 29, 48, 0.06) 44%,
		rgba(14, 29, 48, 0.52) 100%
	);

	/* Elevation.
	   CORRECTION: the Stage 1 DESIGN.md said this design has no card shadows.
	   It uses them 38 times. Depth on a card is this two-layer shadow plus the
	   hairline, not the hairline alone. -------------------------------- */
	--shadow-card: 0 2px 6px rgba(0, 0, 0, 0.07), 0 10px 24px rgba(0, 0, 0, 0.10);        /* 24x */
	--shadow-card-hover: 0 6px 14px rgba(0, 0, 0, 0.10), 0 18px 40px rgba(0, 0, 0, 0.14); /* 14x */
	--shadow-overlay: 0 24px 48px -12px rgba(0, 0, 0, 0.55);                              /* 2x, the nav dropdown */
	--card-hover-lift: translateY(-3px);                                                   /* 14x */

	/* Interactive control boundary.
	   Four components independently invented --control-line and each explained
	   why: --line composites to about 1.6:1 on the navy and --line-strong to
	   about 2.4:1, so neither meets the 3:1 that WCAG 1.4.11 requires for the
	   boundary of a user interface component. They were right, and the token was
	   missing. The design uses rgba(210,220,230,0.42) once, which composites to
	   3.23:1 on --bg, so that is the value rather than a new invention.
	   --line and --line-strong stay what they are: dividers, not control edges. */
	--control-line: rgba(210, 220, 230, 0.42);
	--control-line-strong: rgba(210, 220, 230, 0.6);
}