/*
 * Design tokens - the single place brand values are declared.
 *
 * Every other stylesheet reads these custom properties and never hard-codes a
 * colour, radius, shadow or duration, so the whole look is retuned from here.
 *
 * The violet is taken from the brand mark itself.
 */

:root {
	/* Colour - warm neutrals plus one violet from the mark ---------------- */
	--lb-ink: #1A1620;
	--lb-ink-2: #4A4356;
	--lb-mute: #6E6678;          /* 5.5:1 on paper - meta, units, labels */
	--lb-mute-2: #736B85;        /* 5.0:1 - counts inside pills only */
	--lb-violet: #8323E1;        /* the brand mark's violet - primary action only */
	--lb-violet-ink: #6417C0;    /* violet text on paper, passes AA */
	--lb-violet-mist: #EDE3FB;   /* active filter chips, notes */
	--lb-violet-rgb: 131, 35, 225; /* --lb-violet, so rings can carry alpha */
	--lb-sand: #C6A87C;          /* rules, counters, progress, eyebrow */
	--lb-sand-soft: #EFE7DB;     /* quiet circles, prev arrow */
	--lb-paper: #FBF9F6;         /* page ground */
	--lb-linen: #F4EFE7;         /* alternate section ground */
	--lb-nav-hover: #E9DAFB;     /* nav pill hover fill */
	--lb-surface: #FFFFFF;       /* cards, panels, pills */
	--lb-line: #E1D9CD;          /* hairline on warm ground */
	--lb-ok: #186B42;
	--lb-ok-bg: #E7F3EC;
	--lb-well: linear-gradient(155deg, #FBF8F3 0%, #EBE3D7 100%); /* image placeholder */

	/* Type ---------------------------------------------------------------- */
	--lb-font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
	--lb-font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--lb-fs-display: clamp(42px, 5.6vw, 78px);
	--lb-fs-h2: clamp(30px, 3.6vw, 54px);
	--lb-fs-h3: clamp(26px, 3vw, 40px);
	--lb-fs-body: 16.5px;
	--lb-lh-body: 1.7;
	--lb-fs-eyebrow: 10px;
	--lb-ls-eyebrow: .18em;
	--lb-fs-control: 12.5px;

	/* Radius - 0 is never used -------------------------------------------- */
	--lb-r-control: 4px; /* matches the plugin card controls */
	--lb-r-sm: 8px;
	--lb-r-pill: 999px;
	--lb-r-thumb: 16px;
	--lb-r-card: 22px;
	--lb-r-panel: 26px;
	--lb-r-hero: 32px;
	--lb-r-section: 40px;

	/* Elevation ----------------------------------------------------------- */
	--lb-sh-rest: 0 1px 2px rgba(26, 22, 32, .04);
	--lb-sh-hover: 0 20px 44px -24px rgba(26, 22, 32, .4);
	--lb-sh-panel: 0 24px 48px -32px rgba(26, 22, 32, .4);

	/* Control ring - the one hover/pressed signal every control shares ----- */
	--lb-ring-hover: 0 0 0 3px rgba(var(--lb-violet-rgb), .12);
	--lb-ring-active: 0 0 0 3px rgba(var(--lb-violet-rgb), .22);

	/* Space and rhythm ---------------------------------------------------- */
	--lb-s1: 4px;
	--lb-s2: 8px;
	--lb-s3: 12px;
	--lb-s4: 16px;
	--lb-s5: 22px;
	--lb-s6: 32px;
	--lb-s7: 52px;
	--lb-s8: 76px;
	--lb-s9: 100px;
	--lb-maxw: 1400px;
	--lb-gutter: 32px;
	--lb-inset: 24px;            /* hero and banner panel inset */

	/* Motion -------------------------------------------------------------- */
	--lb-ease: cubic-bezier(.22, .75, .2, 1);
	--lb-dur: 220ms;
	--lb-dur-slide: 620ms;

	/* Sticky stack - every offset is derived, never hard-coded twice ------- */
	--lb-admin-h: 0px;           /* set by sticky-stack.js when the admin bar is present */
	--lb-header-h: 80px;         /* measured on load and resize */
	--lb-bar-h: 66px;            /* filter bar, measured */
	--lb-sticky-header: var(--lb-admin-h);
	--lb-sticky-bar: calc(var(--lb-admin-h) + var(--lb-header-h));
	--lb-sticky-aside: calc(var(--lb-admin-h) + var(--lb-header-h) + var(--lb-bar-h) + 22px);
	--lb-aside-max: calc(100vh - var(--lb-sticky-aside) - 28px);
	--lb-z-bar: 45;
	--lb-z-header: 60;
	--lb-z-overlay: 85;
	--lb-z-drawer: 90;
}

@media (max-width: 899px) {
	:root {
		--lb-gutter: 20px;
	}
}

/* Motion tokens collapse rather than each component re-testing the query. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--lb-dur: 0ms;
		--lb-dur-slide: 0ms;
	}
}