/*
 * Lidia design tokens — THE single source of visual truth (002 T004;
 * 006 contracts/visual-system.md §1–§3, research R1/R2, FR-001/002/003/083).
 *
 * Two-level naming:
 *   1. PRIMITIVES   — base + neutrals + the FOUR accents, type/space/motion
 *      scales (--color-bg/--color-ink, --color-neutral-1/2,
 *      --accent-blue|yellow|coral|violet, --text-*, --space-*, --bp-*, …)
 *   2. SEMANTICS    — what components consume (--color-text|surface|action…,
 *      --surface-{section} per-section aliases, --font-display|body).
 *
 * Editing THIS file re-skins the whole site (quickstart V11 / SC-011).
 * Components/layout rules must never hard-code a raw value (design-tokens.md
 * §3) — explore here instead (§6, FR-010).
 *
 * Palette (006 — FR-001/FR-083, visual-system §1/§5). The 005 monochrome
 * primitives (the full grey ramp and its black/white/off-white siblings)
 * are REMOVED, not left unused:
 *
 *   base      warm off-white #FBF9F4  → ink #141414            17.51:1
 *   neutral-1 #F1EDE4 soft surface    → ink                    15.77:1
 *   neutral-2 #8C8578 borders         → ink                    10.50:1
 *                                              vs bg (non-text)  3.48:1
 *   muted-on-light #5C574C            → bg                      6.83:1
 *                                      → neutral-1               6.15:1
 *   muted-on-dark  #B8B2A6            → ink surface              8.73:1
 *   muted-on-accent #EDF2FE           → blue                     4.61:1
 *                                      → violet                   5.08:1
 *   blue   #2563EB → white            5.17:1   (blue vs bg 4.91:1)
 *   yellow #F5B301 → ink              9.94:1   (ink only — muted remapped)
 *   coral  #FC5240 → ink              5.63:1   (coral vs bg 3.11:1)
 *   violet #7C3AED → white            5.70:1   (violet vs bg 5.42:1)
 *   dark   #141414 → white           18.42:1
 *
 * 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 — primitives (FR-001: warm base + exactly FOUR accents)
	 * -------------------------------------------------------------- */
	--color-bg: #fbf9f4;      /* warm off-white page base            */
	--color-ink: #141414;     /* near-black text — never pure black  */
	--color-neutral-1: #f1ede4; /* soft neutral supporting surface   */
	--color-neutral-2: #8c8578; /* stronger neutral: borders ≥ 3:1   */

	/* The RGB triple of --color-neutral-2, for hairlines that need alpha.
	 * Not a fifth colour — the same neutral, expressed for compositing. */
	--color-neutral-2-rgb: 140 133 120;

	/* Exactly four accent roles (FR-001, R2) — no fifth, ever. */
	--accent-blue: #2563eb;
	--accent-yellow: #f5b301;
	--accent-coral: #fc5240;
	--accent-violet: #7c3aed;

	/* Text tiers (pairing-scoped — 005 R3 lesson: no global muted grey). */
	--text-muted-on-light: #5c574c; /* on bg / neutral-1 only          */
	--text-muted-on-dark: #b8b2a6;  /* on --color-ink                  */
	--text-muted-on-accent: #edf2fe; /* on blue / violet               */

	/* ------------------------------------------------------------------
	 * 1b. Per-section surface aliases — the FIXED FR-002 colour map
	 *     (Clarification "color map A"). Templates/CSS consume THESE,
	 *     never a raw hex (visual-system §2).
	 * -------------------------------------------------------------- */
	--surface-hero: var(--color-bg);              /* warm off-white */
	--surface-problem: var(--color-ink);          /* dark           */
	--surface-opportunity: var(--accent-yellow);  /* warm yellow    */
	--surface-services: var(--accent-blue);       /* electric blue  */
	--surface-work: var(--color-neutral-1);       /* neutral        */
	--surface-process: var(--accent-coral);       /* vivid coral    */
	--surface-why: var(--accent-violet);          /* accent violet  */
	--surface-cta: var(--color-ink);              /* dark + accent  */

	/* ------------------------------------------------------------------
	 * 1c. Semantic aliases (what components consume)
	 * -------------------------------------------------------------- */
	--color-surface: var(--color-bg);
	--color-surface-muted: var(--color-neutral-1);
	--color-surface-alt: var(--color-neutral-1);
	--color-surface-inverse: var(--color-ink);
	--color-text: var(--color-ink);
	--color-text-strong: var(--color-ink);
	--color-text-muted: var(--text-muted-on-light);
	--color-text-inverse: #ffffff;
	--color-text-inverse-muted: var(--text-muted-on-dark);
	--color-border: rgb(var(--color-neutral-2-rgb) / 0.45); /* decorative hairline */
	--color-border-strong: var(--color-neutral-2);          /* controls ≥ 3:1     */
	--color-action: var(--color-ink);
	--color-action-text: #ffffff;
	--color-action-hover: var(--accent-blue);        /* accent moment on hover */
	--color-action-hover-text: #ffffff;              /* white on blue = 5.17:1 */
	--color-focus: var(--accent-blue);               /* visible on every light surface */
	--color-overlay: rgb(20 20 20 / 0.55);
	--color-border-inverse: rgb(255 255 255 / 0.28);
	--color-notice-surface: var(--color-neutral-1);

	/* ------------------------------------------------------------------
	 * 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). */
	--text-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);   /* caption 12 → 13 */
	--text-sm: clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem); /* small metadata   */
	--text-md: clamp(1rem, 0.98rem + 0.15vw, 1.1875rem);     /* body 16 → 19px   */
	--text-lg: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
	--text-xl: clamp(1.375rem, 1.28rem + 0.5vw, 1.625rem);
	--text-2xl: clamp(1.625rem, 1.45rem + 0.9vw, 2rem);
	--text-3xl: clamp(1.5rem, 1.35rem + 0.75vw, 2.25rem);
	--text-4xl: clamp(1.75rem, 1.55rem + 1vw, 2.25rem);
	--text-5xl: clamp(2.25rem, 1.85rem + 2vw, 3rem);
	--text-6xl: clamp(3rem, 2.25rem + 3.5vw, 4.5rem);        /* section headings */
	--text-hero: clamp(2.75rem, 1.5rem + 6vw, 6.25rem);      /* 44 → 100px display */
	--text-display: clamp(2.5rem, 1.5rem + 4.5vw, 5.5rem);   /* section statements 40 → 88px */
	--text-numeral: clamp(2.75rem, 2rem + 3vw, 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 */
	--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)
	 * -------------------------------------------------------------- */
	--wide-max: 76rem;   /* 1216px grid (visual-system §4) */
	--reading-max: 44rem;

	--container-wide: var(--wide-max);
	--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-neutral-2); /* editorial rules between rows */

	/* ------------------------------------------------------------------
	 * 7. Radius (visual-system §7: editorial blocks 0, controls ≤4px)
	 * -------------------------------------------------------------- */
	--radius-sm: 4px;
	--radius-md: 4px;
	--radius-lg: 4px;
	--radius-full: 999px;

	--radius-card: 0px;
	--radius-button: var(--radius-sm);

	/* ------------------------------------------------------------------
	 * 8. Shadows (subtle, ink-tinted)
	 * -------------------------------------------------------------- */
	--shadow-1: 0 1px 2px rgb(20 20 20 / 0.07);
	--shadow-2: 0 12px 32px rgb(20 20 20 / 0.14);

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

	/* ------------------------------------------------------------------
	 * 9. Motion (006 visual-system §7): ≈140ms hover, ≈240ms surfaces;
	 *    all non-essential motion is neutralised by the guard below (R12).
	 * -------------------------------------------------------------- */
	--duration-fast: 140ms;
	--duration-normal: 240ms;
	--ease-standard: cubic-bezier(0.2, 0, 0.2, 1);

	--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;
	}
}