/*
 * 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 ==== */

/* Generated by tools/tokens-to-css.py. Do not edit by hand,
   re-run the converter against a fresh export instead. */

:root {

	/* ---- Primitives ---- */

	/* Primary */
	--primary-100: #EDD3D4;
	--primary-200: #CE8486;
	--primary-300: #B13B3E;
	--primary-400: #9D0A0E;

	/* Secondary */
	--secondary-100: #DFDFDF;
	--secondary-200: #ABABAC;
	--secondary-300: #7E7E80;
	--secondary-400: #5E5E60;

	/* Accent */
	--accent-100: #DEE4E8;
	--accent-200: #AABAC2;
	--accent-300: #7D95A1;
	--accent-400: #5C7A8A;

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

	/* ---- Semantics, light ---- */

	/* Surface */
	--surface-page: var(--neutral-100);
	--surface-card: var(--white);
	--surface-subtle: var(--neutral-200);
	--surface-overlay: var(--neutral-100);

	/* Text */
	--text-primary: var(--neutral-400);
	--text-secondary: var(--neutral-300);
	--text-disabled: var(--neutral-200);
	--text-on-brand: var(--white);
	--text-accent: var(--primary-400);

	/* Brand */
	--brand-tint: var(--primary-100);
	--brand-subtle: var(--primary-200);
	--brand-default: var(--primary-300);
	--brand-strong: var(--primary-400);

	/* CTA */
	--cta-tint: var(--accent-100);
	--cta-default: var(--accent-400);
	--cta-hover: var(--accent-300);
	--cta-text: var(--text-primary);

	/* Accent */
	--accent-tint: var(--accent-100);
	--accent-default: var(--accent-300);
	--accent-strong: var(--accent-400);
	--accent-link: var(--accent-300);
	--accent-badge-bg: var(--accent-100);
	--accent-badge-text: var(--accent-400);

	/* Border */
	--border-default: var(--neutral-200);
	--border-strong: var(--neutral-300);
	--border-brand: var(--primary-300);
	--border-focus: var(--accent-300);
}

.is-dark {

	/* Surface */
	--surface-page: var(--neutral-400);
	--surface-card: var(--neutral-300);
	--surface-subtle: var(--neutral-300);
	--surface-overlay: var(--neutral-300);

	/* Text */
	--text-primary: var(--neutral-100);
	--text-secondary: var(--neutral-200);
	--text-disabled: var(--neutral-300);
	--text-on-brand: var(--white);
	--text-accent: var(--primary-200);

	/* Brand */
	--brand-tint: var(--primary-400);
	--brand-subtle: var(--primary-400);
	--brand-default: var(--primary-300);
	--brand-strong: var(--primary-200);

	/* CTA */
	--cta-tint: var(--secondary-400);
	--cta-default: var(--secondary-300);
	--cta-hover: var(--secondary-200);
	--cta-text: var(--secondary-200);

	/* Accent */
	--accent-tint: var(--accent-400);
	--accent-default: var(--accent-200);
	--accent-strong: var(--accent-100);
	--accent-link: var(--accent-200);
	--accent-badge-bg: var(--accent-400);
	--accent-badge-text: var(--accent-200);

	/* Border */
	--border-default: var(--neutral-300);
	--border-strong: var(--neutral-200);
	--border-brand: var(--primary-300);
	--border-focus: var(--accent-200);
}

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

:root {

	/* ---- Font families (tokens/typography.json: heading Archivo, body Open Sans) ---- */

	--font-family-heading: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--font-family-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;
	--font-family-button: "Archivo", "Helvetica Neue", Arial, sans-serif;

	/* ---- Type scale, from the Homepage frame ----------------------------
	   Section headers are Archivo 700 30/36. The hero and contact headers
	   are 40/40 and get that size per block in style.css. Block sub-headers
	   render as h2 and are the 17px Archivo 500 grey line in the design. */

	--font-size-h1: clamp(26px, 2.6vw, 30px);
	--font-size-h2: 17px;
	--font-size-h3: 22px;
	--font-size-h4: 17px;
	--font-size-h5: 16px;

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

	--line-height-heading: 1.2;
	--line-height-body: 1.75;

	/* Headings are the text colour, not the parent's legacy blue. */
	--color-heading: var(--text-primary);

	/* ---- Buttons: Archivo 800 14px, 5px radius, 5/10 padding ------------ */

	--btn-radius: 5px;
	--btn-padding-y: 5px;
	--btn-padding-x: 10px;

	/* ---- Spacing system (2026-09-29): one value per role ----------------
	   From the frames' dominant values. The frames themselves vary (31–100
	   between sections, 44–92 intro → items, 0–12 heading → body); the site
	   uses one value each. Rules: css/site.css "Spacing system". */

	--sh-space-section: 50px;  /* between sections; padding inside bands and panels; before a notch */
	--sh-space-stack: 50px;    /* intro → items / tiles / form inside a section */
	--sh-space-heading: 12px;  /* heading block (heading + sub-line) → body copy */

	--margin-vertical-normal: var(--sh-space-section);
	--margin-vertical-wide: var(--sh-space-section);
	--margin-vertical-wider: var(--sh-space-section);

	/* ---- Tint: dark bands are Neutral-400 ------------------------------- */

	--tint-color: #1E2023;
	--tint-opacity: 0.9;

}