/*
 * Lidia design tokens — THE single source of visual truth (002 T004;
 * 006 contracts/visual-system.md §1–§3; 008 contracts/visual-system.md §1
 * — the site-wide home-dark system, FR-001/FR-009/FR-024).
 *
 * Two-level naming:
 *   1. PRIMITIVES   — canvas/surface tones + the accents, type/space/motion
 *      scales (--color-bg/--color-surface, --accent-blue|green|amber,
 *      --text-*, --space-*, --bp-*, …)
 *   2. SEMANTICS    — what components consume (--color-text|border|action…,
 *      --surface-{section} per-section aliases, --font-display|body).
 *
 * Editing THIS file re-skins the whole site (quickstart V13 / SC-011).
 * Components/layout rules must never hard-code a raw value (design-tokens.md
 * §3) — explore here instead (§6, FR-010).
 *
 * Palette (008 — FR-001, visual-system §1/§2). The 006 warm-light palette
 * (the off-white ramp, the yellow/coral/violet accents, light-only shadows)
 * is REMOVED, not left unused:
 *
 *   canvas     #030A17  page background — every URL
 *   surface    #07101F  cards, header (translucent), footer, dialogs, inputs
 *   hairline   white @ 8%  / strong hairline white @ 14%  (decorative)
 *   control    white @ 40%  boundaries ≥3:1 (ghost pills, inputs, toggle)
 *   text       #E8EDF7  muted #9BA7B8       → canvas 15.4:1 / 7.3:1 (AA)
 *   accent     blue #3B82F6 (hover/bright #60A5FA, deep #1D4ED8)
 *   signals    green #34D399 / amber #FBBF24 — status chips only, always
 *              beside a text label (FR-021)
 *   inverse    cream #F3F0E8 + ink #14171C — the ONE warm surface,
 *              consumed only by the homepage's dh-why rules (FR-012)
 *
 * Fonts (006 FR-003, research R1): TWO families site-wide — self-hosted
 * Bricolage Grotesque (display) + Manrope (body), both OFL variable woff2 in
 * assets/fonts/, `font-display: swap`, zero third-party requests (FR-081).
 */

/* ---------------------------------------------------------------------
 * Display face (006 T003) — exactly one @font-face beyond Manrope (FR-003)
 * ------------------------------------------------------------------- */

@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 200 800;
	font-stretch: 75% 100%;
	font-display: swap;
	src: url('assets/fonts/bricolage-grotesque-latin-latin-ext[opsz,wdth,wght]-variable.woff2') format('woff2');
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('assets/fonts/manrope-latin-latin-ext[wght]-variable.woff2') format('woff2');
	unicode-range: U+0000-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF,
		U+2000-2074, U+20A0-20C0, U+2113, U+2122, U+2190-2193, U+2212, U+2215,
		U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}

:root {
	/* ------------------------------------------------------------------
	 * 1. Colors — the dark product-grade editorial palette (008 FR-001,
	 *    visual-system §2). Declaration site: raw values live ONLY here.
	 * -------------------------------------------------------------- */
	--color-bg: #030a17;      /* page canvas — every URL              */
	--color-surface: #07101f; /* raised surface: cards/header/dialogs  */
	--color-ink: #030a17;     /* darkest tone: text on accent/cream    */

	/* Tone steps: white-alpha surfaces over the canvas (FR-012 — subtle
	 * alternation between dark tones, never colored section blocks). */
	--color-surface-muted: rgb(255 255 255 / 0.04);
	--color-surface-alt: rgb(255 255 255 / 0.06);

	/* The ONE warm inverse surface — homepage-only consumer (FR-012). */
	--color-surface-inverse: #f3f0e8;

	/* Accent roles: blue is the site's single chromatic accent; green and
	 * amber are signal colors — status chips only, always beside text. */
	--accent-blue: #3b82f6;
	--accent-blue-bright: #60a5fa;
	--accent-blue-deep: #1d4ed8;
	--accent-green: #34d399;
	--accent-amber: #fbbf24;

	/* Text tiers (pairing-scoped — every tier has a measured pair). */
	--color-text: #e8edf7;
	--color-text-strong: #e8edf7;
	--color-text-muted: #9ba7b8;
	--color-text-inverse: #14171c;        /* on the cream surface only */
	--color-text-inverse-muted: #464b54;

	/* Lines: hairline separation (decorative) + control boundaries
	 * ≥3:1 against both dark tones (WCAG 1.4.11 / visual-system §4). */
	--color-line: rgb(255 255 255 / 0.08);          /* decorative hairline  */
	--color-line-strong: rgb(255 255 255 / 0.14);   /* strengthened hairline */
	--color-control-line: rgb(255 255 255 / 0.4);   /* controls ≥3:1        */

	/* ------------------------------------------------------------------
	 * 1b. Per-section surface aliases — the section colour map, now the
	 *     two dark tones (data-model §1). Templates/CSS consume THESE,
	 *     never a raw hex (visual-system §2).
	 * -------------------------------------------------------------- */
	--surface-hero: var(--color-bg);
	--surface-problem: var(--color-surface);
	--surface-opportunity: var(--color-bg);
	--surface-services: var(--color-surface);
	--surface-work: var(--color-bg);
	--surface-process: var(--color-surface);
	--surface-why: var(--color-surface);
	--surface-cta: var(--color-surface);

	/* ------------------------------------------------------------------
	 * 1c. Semantic aliases (what components consume)
	 * -------------------------------------------------------------- */
	--color-border: var(--color-line);                    /* decorative hairline */
	--color-border-strong: var(--color-control-line);     /* controls ≥ 3:1     */
	--color-border-inverse: rgb(20 23 28 / 0.16);         /* hairline on cream  */
	--color-border-inverse-strong: rgb(20 23 28 / 0.32);  /* boundary on cream  */
	--color-rule: var(--color-line);                      /* editorial rules    */
	--color-white: #ffffff;                 /* label on the deep-blue ground   */
	--color-action: var(--accent-blue);
	--color-action-text: var(--color-ink);                /* ink on blue 5.2:1  */
	--color-action-hover: var(--accent-blue-bright);
	--color-action-hover-text: var(--color-ink);
	--color-focus: var(--accent-blue-bright);             /* ring ≥3:1 on both tones */
	--color-overlay: rgb(3 10 23 / 0.72);
	--color-notice-surface: var(--color-surface-muted);

	/* ------------------------------------------------------------------
	 * 2. Typography — TWO families (006 FR-003, Clarification "typeface B")
	 * -------------------------------------------------------------- */
	--font-display: 'Bricolage Grotesque', 'Manrope', -apple-system,
		BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI',
		Roboto, Helvetica, Arial, sans-serif;
	--font-sans: var(--font-body); /* kept for markup stability (005) */
	--font-serif: var(--font-body);

	/* Type scale — fluid (clamp) steps (006 FR-003, visual-system §3).
	 * Every step is the original value × 0.9 (global ~10% downshift). */
	--text-xs: clamp(0.675rem, 0.655rem + 0.09vw, 0.73125rem);   /* caption 10.8 → 11.7 */
	--text-sm: clamp(0.7875rem, 0.775rem + 0.072vw, 0.84375rem); /* small metadata      */
	--text-md: clamp(0.9rem, 0.88rem + 0.135vw, 1.06875rem);     /* body 14.4 → 17.1px  */
	--text-lg: clamp(1.0125rem, 0.97rem + 0.225vw, 1.125rem);
	--text-xl: clamp(1.2375rem, 1.15rem + 0.45vw, 1.4625rem);
	--text-2xl: clamp(1.4625rem, 1.3rem + 0.81vw, 1.8rem);
	--text-3xl: clamp(1.35rem, 1.21rem + 0.675vw, 2.025rem);
	--text-4xl: clamp(1.575rem, 1.39rem + 0.9vw, 2.025rem);
	--text-5xl: clamp(2.025rem, 1.66rem + 1.8vw, 2.7rem);
	--text-6xl: clamp(2.7rem, 2.02rem + 3.15vw, 4.05rem);        /* section headings */
	--text-hero: clamp(2.475rem, 1.35rem + 5.4vw, 5.625rem);     /* 39.6 → 90px display */
	--text-display: clamp(2.25rem, 1.35rem + 4.05vw, 4.95rem);   /* section statements 36 → 79px */
	--text-numeral: clamp(2.475rem, 1.8rem + 2.7vw, 4.5rem);     /* 01–08 display numerals */

	/* Role tokens (006 visual-system §3 — one role, one use). */
	--text-eyebrow: var(--text-sm);
	--text-label: var(--text-sm);
	--text-nav: var(--text-sm);
	--text-caption: var(--text-xs);

	--leading-tight: 1.08;
	--leading-snug: 1.3;
	--leading-normal: 1.65;
	--leading-loose: 1.8;

	--weight-regular: 400;
	--weight-medium: 500;
	--weight-bold: 700;
	--weight-display: 800;

	--tracking-tight: -0.03em;  /* tuned for Bricolage at display sizes (R1) */
	--tracking-tighter: -0.04em;
	--tracking-wide: 0.14em;    /* uppercase eyebrows/labels */

	/* ------------------------------------------------------------------
	 * 3. Spacing — 4/8-based scale, 0 → 12
	 * -------------------------------------------------------------- */
	--space-0: 0;
	--space-1: 0.25rem;   /*  4px */
	--space-2: 0.5rem;    /*  8px */
	--space-3: 0.75rem;   /* 12px */
	--space-4: 1rem;      /* 16px */
	--space-5: 1.5rem;    /* 24px — also the shared container gutter */
	--space-6: 2rem;      /* 32px */
	--space-7: 2.5rem;    /* 40px */
	--space-8: 3rem;      /* 48px */
	--space-9: 4rem;      /* 64px */
	--space-10: 5rem;     /* 80px */
	--space-11: 6rem;     /* 96px */
	--space-12: 8rem;     /* 128px */

	/* Section rhythm (006 visual-system §7): 72px mobile → 180px desktop.
	 * Sections are never compressed to shorten the page. */
	--space-section-y: clamp(4.5rem, 2rem + 8vw, 11.25rem);

	/* ------------------------------------------------------------------
	 * 4. Containers (line-length budget)
	 * -------------------------------------------------------------- */
	--container: 1280px;   /* the site-wide container (008 data-model §1) */
	--wide-max: 1280px;    /* kept as the grid alias (005 naming)         */
	--reading-max: 44rem;

	--container-wide: var(--container);
	--container-reading: var(--reading-max);

	/* ------------------------------------------------------------------
	 * 5. Breakpoints — DOCUMENTATION tokens (media queries cannot read custom
	 *    properties). Mirrored literally in layout.css @media queries —
	 *    the only sanctioned duplication (design-tokens.md §4).
	 * -------------------------------------------------------------- */
	--bp-640: 640px;
	--bp-768: 768px;
	--bp-1024: 1024px;
	--bp-1280: 1280px;

	/* ------------------------------------------------------------------
	 * 6. Borders
	 * -------------------------------------------------------------- */
	--border-thin: 1px;
	--border-color: var(--color-border);
	--border-default: var(--border-thin) solid var(--border-color);
	--rule-color: var(--color-rule);

	/* ------------------------------------------------------------------
	 * 7. Radius (visual-system §3: containers 12–16px, pills for CTAs)
	 * -------------------------------------------------------------- */
	--radius: 14px;        /* the default container/card radius (FR-013) */
	--radius-sm: 12px;
	--radius-md: 14px;
	--radius-lg: 16px;
	--radius-full: 999px;
	--pill: 999px;

	--radius-card: var(--radius);
	--radius-button: var(--pill); /* pill CTAs site-wide (FR-013) */

	/* ------------------------------------------------------------------
	 * 8. Shadows (very subtle, black-tinted)
	 * -------------------------------------------------------------- */
	--shadow-1: 0 1px 2px rgb(0 0 0 / 0.35);
	--shadow-2: 0 14px 34px rgb(0 0 0 / 0.45);

	--shadow-card: var(--shadow-1);
	--shadow-dialog: var(--shadow-2);

	/* ------------------------------------------------------------------
	 * 9. Motion (visual-system §5): ONE easing site-wide — expo-out.
	 *    All non-essential motion is neutralised by the guard below.
	 * -------------------------------------------------------------- */
	--duration-fast: 140ms;
	--duration-normal: 240ms;
	--ease-standard: cubic-bezier(0.16, 1, 0.3, 1); /* the only easing (FR-016) */

	--transition-hover:
		color var(--duration-fast) var(--ease-standard),
		background-color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
	--transition-surface:
		opacity var(--duration-normal) var(--ease-standard),
		transform var(--duration-normal) var(--ease-standard);

	/* Utility placements (structural, no visual meaning) */
	--offscreen: -9999px; /* off-screen placement for the spam trap */

	/* ------------------------------------------------------------------
	 * 10. Elevation order + component sizing (encouraged aliases)
	 * -------------------------------------------------------------- */
	--z-header: 100;
	--z-dialog: 1000;
	--z-skip-link: 1100;

	--dialog-max: 60rem;
	--tap-target: 44px; /* comfortable pointer target (WCAG 2.2 AA) */

	/* Compact sticky header height — used by `html { scroll-padding-top }`
	 * so anchor jumps and :focus targets clear the bar (005 FR-010, R6). */
	--header-height: 4rem;
}

/*
 * Single global reduced-motion guard: zeroing the timing tokens disables every
 * token-driven transition/animation site-wide, whatever layer declared it
 * (research R12, SC-007). Layer-specific `prefers-reduced-motion: no-preference`
 * blocks guard the animations that cannot be expressed as tokens (spinners).
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 0.01ms;
		--duration-normal: 0.01ms;
	}
}