/*
 * brand-identity.css
 *
 * The site's brand. Two ways to fill this in:
 *
 * 1. With a Figma export (the normal path): commit the designer's three
 *    token files to this theme's tokens/ folder and run, from the parent:
 *
 *      python3 tools/tokens-to-css.py tokens/primitives.json \
 *          tokens/light.json tokens/dark.json
 *
 *    Paste the output over the GENERATED section below, and never edit
 *    inside it by hand: hand overrides go in the OVERRIDES section, which a
 *    re-run cannot touch.
 *
 * 2. Without an export: override individual primitives or semantics in the
 *    OVERRIDES section. Delete any line you are not changing, an absent
 *    property inherits the parent default.
 *
 * Loads after the parent stylesheet and before this theme's style.css.
 */

/* ==== GENERATED, converter output replaces everything in this section ==== */

:root {

	/* Primitives. 100 lightest to 400 darkest, plus white. */
	/* --primary-100: #EDD3D4; */
	/* --primary-200: #CE8486; */
	/* --primary-300: #B13B3E; */
	/* --primary-400: #9D0A0E; */

	/* --neutral-100: #E8E9E9; */
	/* --neutral-200: #B7B8B9; */
	/* --neutral-300: #6D6E70; */
	/* --neutral-400: #1E2023; */

	/* Semantics, light mode. Chains stay explicit: point at primitives. */
	/* --text-primary: var(--neutral-400); */
	/* --surface-card: var(--white); */
	/* --cta-default: var(--accent-400); */
}

.is-dark {
	/* Semantics, dark mode. */
	/* --text-primary: var(--neutral-100); */
	/* --surface-card: var(--neutral-300); */
}

/* ==== OVERRIDES, hand written, survives converter re-runs ==== */

:root {

	/* ---- Type scale ----------------------------------------------------
	   clamp(minimum, preferred, maximum). Maximum is the desktop size from
	   Figma; preferred in vw is roughly maximum / 12. */

	--font-size-h1: clamp(36px, 5vw, 60px);
	--font-size-h2: clamp(30px, 4vw, 48px);
	--font-size-h3: clamp(25px, 3.17vw, 38px);
	--font-size-h4: clamp(22px, 2.5vw, 30px);
	--font-size-h5: clamp(20px, 2.17vw, 26px);

	--font-size-body: 18px;
	--font-size-small: 16px;

	/* ---- Line height ---------------------------------------------------
	   Unitless only, so it scales with clamped font sizes. */

	--line-height-heading: 1.1;
	--line-height-body: 1.5;

	/* ---- Buttons -------------------------------------------------------
	   The bg/text/hover colours come from the CTA semantics above; only
	   shape lives here. */

	--btn-radius: 8px;
	--btn-padding-y: 10px;
	--btn-padding-x: 14px;

}

/*
 * Component overrides. Site specific re-pointing of which token an element
 * consumes. Example: the parent couples sub-headers to headers
 * (--text-primary) to match the original design; a site that wants grey
 * sub-headers re-points them per block:
 *
 * .lp-hero__sub-header,
 * .lp-callout__sub-header,
 * .lp-gallery__sub-header,
 * .lp-form__sub-header,
 * .lp-two-column__sub-header,
 * .lp-multi-column__sub-header {
 * 	color: var(--text-secondary);
 * }
 */