/* ==========================================================================
   PepLair Research — design tokens
   Every value in the theme comes from this file. No rogue hex, no magic px.
   Brand colours are locked (see /brand/colors.md); everything else is derived.
   ========================================================================== */

@font-face {
	font-family: "Space Grotesk";
	src: url("../fonts/space-grotesk-var-latin.woff2") format("woff2-variations");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-var-latin.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	/* metric-matched to the Arial fallback so the swap costs no layout shift */
	size-adjust: 107%;
	ascent-override: 90%;
	descent-override: 22.5%;
	line-gap-override: 0%;
}

:root {
	/* ---------- Brand (locked — extracted from the live logo + theme) ------ */
	--brand-green: #04a54b;   /* logo mark + "Lair" wordmark */
	--brand-green-deep: #02863c;
	--brand-green-darkest: #037937;
	--brand-action: #00b379;  /* live WoodMart primary — the interactive green */
	--brand-slate: #25353b;   /* logo flask + "Pep" wordmark */

	/* ---------- Neutrals — slate-tinted, never neutral grey -------------- */
	--bg: #ffffff;
	--surface: #f4f7f6;
	--surface-2: #e9efec;
	--border: #dde5e2;
	--border-strong: #c2cec9;
	--text: #0f1a1d;          /* 17.7:1 on --bg */
	--text-muted: #4b5a61;    /* 7.2:1  on --bg — body copy on surfaces */
	--text-subtle: #5a6b74;   /* 5.5:1 on --bg, 5.1:1 on --surface, 4.8:1 on --surface-2 */

	/* ---------- Ink: the dark surface family (hero, footer, bands) ------- */
	--ink: #0f1a1d;
	--ink-2: #16262a;
	--ink-3: #1e3238;
	--ink-line: rgb(255 255 255 / 0.12);
	--on-ink: #e8efed;        /* 15.4:1 on --ink */
	--on-ink-muted: #a7b4b9;  /*  8.3:1 on --ink */

	/* ---------- Accent roles ---------------------------------------------
	   #00b379 is only 2.7:1 on white, so it is never a text or fill colour
	   on light surfaces. On light: --accent-ink (4.7:1). On dark: --accent-lift.
	   -------------------------------------------------------------------- */
	--accent: var(--brand-action);
	--accent-ink: #02863c;     /* button/fill green — white on it is 4.7:1 */
	--accent-ink-hover: #046b31;
	/* Green TEXT and icons. Darker than the fill green so it still clears 4.5:1
	   on --surface (#f4f7f6) and on --accent-soft, not only on white. */
	--accent-text: #037937;    /* 5.5:1 on white, 5.1:1 on --surface */
	--accent-text-hover: #046b31;
	--accent-lift: #35c97f;    /* 8.3:1 on --ink — green on dark surfaces */
	--accent-soft: #e6f6ee;    /* badge / callout tint */
	--accent-soft-strong: #cfeddf;
	--accent-glow: rgb(0 179 121 / 0.28);
	--on-accent: #ffffff;
	--white: #ffffff;          /* text and fills on ink or on the accent */
	--ink-hover: #1c3037;      /* ink button, hover */
	--on-ink-btn-hover: #eaf3ef;

	/* Green veils. Used as washes and glows, never as text or as a fill behind
	   text — #00B379 is only 2.7:1 on white. */
	--veil-accent-xs: rgb(0 179 121 / 0.10);
	--veil-accent-sm: rgb(0 179 121 / 0.16);
	--veil-accent-md: rgb(0 179 121 / 0.30);
	--veil-accent-lg: rgb(0 179 121 / 0.42);
	--veil-brand-sm: rgb(4 165 75 / 0.20);
	--veil-lift: rgb(53 201 127 / 0.50);   /* accent-lift at half strength, on ink */

	/* Ink scrims for overlays and drawer shadows. */
	--scrim: rgb(15 26 29 / 0.45);
	--scrim-strong: rgb(15 26 29 / 0.60);
	--scrim-shadow: rgb(15 26 29 / 0.22);

	/* Surfaces layered on ink. */
	--on-ink-4: rgb(255 255 255 / 0.04);
	--on-ink-6: rgb(255 255 255 / 0.06);
	--on-ink-8: rgb(255 255 255 / 0.08);
	--on-ink-14: rgb(255 255 255 / 0.14);
	--on-ink-20: rgb(255 255 255 / 0.20);
	--on-ink-28: rgb(255 255 255 / 0.28);
	--frost: rgb(255 255 255 / 0.92);      /* control on a photo */
	--frost-strong: rgb(255 255 255 / 0.94);
	--glass-header: rgb(255 255 255 / 0.86);
	--glass-card: rgb(255 255 255 / 0.045); /* hero card on ink */
	--on-ink-10: rgb(255 255 255 / 0.10);
	--on-ink-16: rgb(255 255 255 / 0.16);
	--on-ink-22: rgb(255 255 255 / 0.22);
	--on-ink-35: rgb(255 255 255 / 0.35);
	--on-ink-45: rgb(255 255 255 / 0.45);
	--on-ink-55: rgb(255 255 255 / 0.55);
	--on-ink-65: rgb(255 255 255 / 0.65);
	--on-ink-90: rgb(255 255 255 / 0.90);

	/* Drop shadows deep enough to need pure black rather than tinted ink. */
	--shadow-cast-sm: rgb(0 0 0 / 0.35);
	--shadow-cast-md: rgb(0 0 0 / 0.40);
	--shadow-cast-lg: rgb(0 0 0 / 0.45);
	--gradient-brand: linear-gradient(120deg, var(--brand-green) 0%, var(--brand-action) 100%);
	--gradient-ink: linear-gradient(160deg, #16262a 0%, #0f1a1d 60%, #0c1517 100%);

	/* ---------- Semantic --------------------------------------------------- */
	--success: #17845a; --success-soft: #e6f5ee;
	--warning: #8a5b00; --warning-soft: #fff4e0;
	--danger:  #c2323b; --danger-soft:  #fdeaec;
	--info:    #1f6f9a; --info-soft:    #e7f2f8;
	--focus:   #00b379;

	/* ---------- Type ------------------------------------------------------- */
	--font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
	--font-body: "Inter", "Segoe UI", Arial, system-ui, sans-serif;

	--step--3: clamp(0.75rem, 0.74rem + 0.05vw, 0.79rem);   /* micro labels, badges — floored at 12px */
	--step--2: clamp(0.79rem, 0.77rem + 0.09vw, 0.85rem);
	--step--1: clamp(0.83rem, 0.80rem + 0.16vw, 0.94rem);
	--step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
	--step-1:  clamp(1.25rem, 1.16rem + 0.44vw, 1.50rem);
	--step-2:  clamp(1.56rem, 1.41rem + 0.75vw, 2.00rem);
	--step-3:  clamp(1.95rem, 1.71rem + 1.22vw, 2.66rem);
	--step-4:  clamp(2.44rem, 2.05rem + 1.94vw, 3.55rem);
	--step-5:  clamp(3.05rem, 2.45rem + 3.00vw, 4.73rem);

	--lh-tight: 1.05;
	--lh-heading: 1.18;
	--lh-snug: 1.35;
	--lh-body: 1.65;
	--tracking-tight: -0.03em;
	--tracking-heading: -0.02em;
	--tracking-eyebrow: 0.12em;

	/* ---------- Space — 4px base, non-linear ------------------------------- */
	--space-3xs: 4px;  --space-2xs: 8px;  --space-xs: 12px;
	--space-s: 16px;   --space-m: 24px;   --space-l: 32px;
	--space-xl: 48px;  --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 128px;

	/* Section rhythm: one value site-wide, fluid between phone and desktop */
	--section-y: clamp(64px, 4vw + 40px, 112px);
	--section-y-lg: clamp(80px, 6vw + 44px, 144px);
	--section-y-tight: clamp(40px, 3vw + 26px, 72px);

	/* One rhythm for every hero band, so a page never opens taller or shorter
	   than its neighbours. --hero-y-end is the shorter bottom used where a rail
	   or stat row already sits at the base of the band. */
	--hero-y: clamp(64px, 7vw, 120px);
	--hero-y-end: clamp(40px, 4vw, 64px);

	/* ---------- Layout ----------------------------------------------------- */
	--container: 1240px;
	--container-narrow: 880px;
	--measure: 58ch;                 /* ~78 rendered characters in Inter */
	--measure-heading: 22ch;
	--gutter: clamp(20px, 4vw, 48px);
	--header-h: 76px;
	--header-h-compact: 62px;

	/* ---------- Radius / elevation ----------------------------------------- */
	--radius-xs: 2px;
	--radius-s: 6px;
	--radius-m: 10px;
	--radius-l: 16px;
	--radius-xl: 24px;
	--radius-full: 999px;

	--shadow-s: 0 1px 2px rgb(15 26 29 / 0.05), 0 1px 3px rgb(15 26 29 / 0.07);
	--shadow-m: 0 4px 12px rgb(15 26 29 / 0.07), 0 2px 4px rgb(15 26 29 / 0.05);
	--shadow-l: 0 14px 36px rgb(15 26 29 / 0.11), 0 4px 10px rgb(15 26 29 / 0.06);
	--shadow-accent: 0 10px 26px rgb(0 179 121 / 0.22);

	/* ---------- Borders ----------------------------------------------------- */
	--hairline: 1px solid var(--border);
	--hairline-strong: 1px solid var(--border-strong);
	--hairline-ink: 1px solid var(--ink-line);

	/* ---------- Z-index ----------------------------------------------------- */
	--z-base: 1;
	--z-sticky: 40;
	--z-header: 60;
	--z-drawer: 80;
	--z-modal: 100;
	--z-toast: 120;

	/* ---------- Motion ------------------------------------------------------
	   Durations and easings live here so the motion layer and the CSS
	   micro-interactions can never drift apart.
	   ---------------------------------------------------------------------- */
	--dur-instant: 90ms;
	--dur-fast: 160ms;
	--dur-base: 260ms;
	--dur-slow: 420ms;
	--dur-reveal: 620ms;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
	--stagger: 70ms;
	--hero-delay: 120ms;
	--hero-stagger: 90ms;
}

/* A dark band re-points the surface roles instead of overriding 30 rules. */
.on-ink {
	--bg: var(--ink);
	--surface: var(--ink-2);
	--surface-2: var(--ink-3);
	--border: var(--ink-line);
	--border-strong: rgb(255 255 255 / 0.22);
	--text: var(--on-ink);
	--text-muted: var(--on-ink-muted);
	--text-subtle: #8d9ba1;
	--accent-text: var(--accent-lift);
	--accent-text-hover: #55dc9a;
	--accent-soft: rgb(0 179 121 / 0.14);
	--accent-soft-strong: rgb(0 179 121 / 0.22);
	color: var(--text);
	background-color: var(--bg);
}

/* The inverse of .on-ink: a light card sitting inside a dark band needs the
   light token set back, or its badges and links keep the on-dark colours and
   fail contrast against white. */
.on-ink .on-light {
	--bg: #ffffff;
	--surface: #f4f7f6;
	--surface-2: #e9efec;
	--border: #dde5e2;
	--border-strong: #c2cec9;
	--text: #0f1a1d;
	--text-muted: #4b5a61;
	--text-subtle: #5a6b74;
	--accent-text: #037937;
	--accent-text-hover: #046b31;
	--accent-soft: #e6f6ee;
	--accent-soft-strong: #cfeddf;
	color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms;
		--dur-slow: 1ms; --dur-reveal: 1ms; --stagger: 0ms;
	}
}