/*
 * Beauty Demo brand: the GlowSkin kit (Stylist, Elementor kit 20) mapped to
 * legwork-base role tokens + this child's own kit tokens (--bd-*).
 * Source of every value: design/stylist-reference/NOTES.md (kit globals, exact).
 *
 * Breakpoints (Elementor → mobile-first): base = mobile (≤767),
 * 768 = tablet (≤1024), 1025 = laptop (≤1366), 1367 = desktop.
 *
 * Fonts: self-hosted (OFL, licences in ../fonts/). Rufina ships 400 + 700 only
 * and Rosarivo 400 only, so the kit's 500/100 weights render as 400, exactly as
 * on Stylist (Google serves the same files). Archivo is the main family via
 * lw_config('font'). Buttons use system Helvetica (Arial on Windows), as Stylist.
 */
@font-face { font-family: "Rufina"; src: url("../fonts/rufina-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Rufina"; src: url("../fonts/rufina-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Rosarivo"; src: url("../fonts/rosarivo-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

@layer brand {
	:root {
		/* Kit colours (Elementor global IDs in comments). */
		--bd-black: #000000;        /* primary: headings */
		--bd-secondary: #2F3028;    /* secondary: nav, subtitles, card titles */
		--bd-text: #5D5D5D;         /* text: body (6.58:1 on white, 6.21:1 on cream) */
		--bd-accent: #995A32;       /* accent (5.44:1 with white) */
		--bd-white: #FFFFFF;        /* a567df4 */
		--bd-cream: #FFF7EF;        /* 495d27d */
		--bd-peach: #F4C6AF;        /* 4a5499b */
		--bd-tan: #BF7E5D;          /* 0f01f5c */
		--bd-peach-light: #FFDFC7;  /* 742343e */
		--bd-border: #87868636;     /* 659f957 Border 01 */

		/*
		 * Buttons (Luca 2026-10-09: "fix contrast, keep the look"). Stylist's
		 * button gradients run brown → light peach under white text (~1.06:1 at
		 * the light end). Same warm gradient, but every stop behind white text
		 * stays >= 4.5:1: deep #7E4626 (7.5:1) → #A56842 (4.51:1, the lightest
		 * point on Stylist's brown→peach line that passes).
		 */
		--bd-btn-deep: #7E4626;
		--bd-btn-light: #A56842;

		/* Role tokens for the parent. */
		--color-ink: var(--bd-black);
		--color-paper: var(--bd-white);
		--color-page: var(--bd-white);
		--color-panel: var(--bd-cream);
		--color-accent: var(--bd-accent);
		--color-accent-deep: var(--bd-btn-deep);
		--color-muted: var(--bd-text);
		--color-line: var(--bd-border);
		--color-focus: var(--bd-accent);

		/* Families. */
		--bd-font-display: "Rufina", Georgia, serif;
		--bd-font-text: var(--font-sans);           /* Archivo, from lw_font() */
		--bd-font-eyebrow: "Rosarivo", Georgia, serif;
		--bd-font-button: Helvetica, Arial, sans-serif;

		/* Kit type presets, mobile values first (px as in the kit). */
		--bd-h1: 41px;        /* primary */
		--bd-h2: 35px;        /* secondary */
		--bd-h3: 27px;        /* 887363b */
		--bd-h4: 21px;        /* db1e030 */
		--bd-h5: 20px;        /* ef116fc */
		--bd-h6: 14px;        /* 0d5e945 */
		--bd-body: 15px;      /* text */
		--bd-button: 12px;    /* accent */
		--bd-menu: 16px;      /* 6aaa7b7 (laptop value inherited down) */
		--bd-eyebrow: 11px;   /* 08fdc8c */
		--bd-f23: 21px;       /* cbbc4e2 */
		--bd-f27: 23px;       /* 670fdd6 */
		--bd-counter: 35px;   /* 1d44c72 */
		--bd-quote: 18px;     /* cf855e7 */
		--bd-f16: 14px;       /* d848767 */
		--bd-f14: 13px;       /* 88e7dcb */

		/* Motion: Stylist's curves as child tokens (CLAUDE.md: tokens, never literals). */
		--bd-ease: ease;                                   /* CSS default; Elementor/Jeg transitions */
		--bd-ease-panel: cubic-bezier(.6, .1, .68, .53);   /* Jeg off-canvas menu */
		--bd-ease-swing: cubic-bezier(.36, 0, .64, 1);     /* jQuery "swing" (Jeg accordion slide, counters) */
		--bd-fade-duration: 1.25s;                         /* Elementor fadeIn "normal" */

		/* Layout. */
		--bd-boxed: 1300px;
		--bd-header-overlap: 90px;   /* header pull-up: min(kit negative margin, header height) */
	}

	@media (min-width: 768px) {
		:root {
			--bd-h1: 43px; --bd-h2: 37px; --bd-h3: 27px; --bd-h4: 22px; --bd-h5: 19px;
			--bd-f23: 21px; --bd-f27: 25px; --bd-counter: 40px; --bd-quote: 19px;
		}
	}
	@media (min-width: 1025px) {
		:root {
			--bd-h1: 55px; --bd-h2: 40px; --bd-h3: 40px; --bd-h4: 24px; --bd-h5: 19px;
			--bd-body: 18px; --bd-button: 15px; --bd-menu: 16px; --bd-eyebrow: 12px;
			--bd-f23: 22px; --bd-f27: 25px; --bd-counter: 45px; --bd-quote: 19px;
			--bd-f16: 16px; --bd-f14: 14px;
			--bd-header-overlap: 104px; /* kit -110px, capped at the 104px header (Kava #masthead can't go below 0) */
		}
	}
	@media (min-width: 1367px) {
		:root {
			--bd-h1: 68px; --bd-h2: 54px; --bd-h4: 23px; --bd-menu: 17px;
			--bd-f23: 23px; --bd-f27: 27px; --bd-counter: 56px; --bd-quote: 22px;
			--bd-header-overlap: 100px;
		}
	}
}