/*
 * TEDA design tokens (P05, SPEC §3, D1).
 *
 * Every TEDA token consumes Blocksy's palette variables (§A.2): change a colour
 * in the Customizer and all of TEDA follows — nothing here hardcodes a colour
 * except the fallbacks inside this :root block (house rule 3). Derived tints use
 * color-mix() so they track the palette too.
 */

:root {
	/* Palette — mapped to Blocksy's eight slots. Fallbacks match SPEC §3.1.
	   Green is primary (slot 1); slot 2 is a real, independently-editable
	   light-green (backgrounds/muted accents only, never text — same rule as
	   blue-light below); brown is now a single shade (slot 4, the former
	   "brown-deep" hex) kept as a retained secondary accent, not the primary. */
	--teda-green:       var(--theme-palette-color-1, #23642A);
	--teda-green-light: var(--theme-palette-color-2, #8DAE90);
	--teda-blue:        var(--theme-palette-color-3, #046BB1);
	--teda-brown:       var(--theme-palette-color-4, #4A1703);
	--teda-sand:        var(--theme-palette-color-5, #F4EDE6);
	--teda-sand-deep:   var(--theme-palette-color-6, #E8DCD0);
	--teda-ink:         var(--theme-palette-color-7, #241A15);
	--teda-white:       var(--theme-palette-color-8, #FFFFFF);

	/* Derived tints — follow the palette via color-mix() (prototype §B.1). */
	--teda-brown-dark: color-mix(in srgb, var(--teda-brown) 85%, black);
	--teda-brown-pale: color-mix(in srgb, var(--teda-brown) 12%, var(--teda-white));
	--teda-blue-light: color-mix(in srgb, var(--teda-blue) 52%, var(--teda-white));
	--teda-blue-pale:  color-mix(in srgb, var(--teda-blue) 12%, var(--teda-white));
	--teda-green-deep: color-mix(in srgb, var(--teda-green) 85%, black);
	--teda-green-pale: color-mix(in srgb, var(--teda-green) 12%, var(--teda-white));
	/* Secondary text. 68% ink keeps it >=4.5:1 on white (WCAG 1.4.3, verified in the
	   rendered page with axe, P17) while still reading as muted. */
	--teda-muted:      color-mix(in srgb, var(--teda-ink) 68%, var(--teda-white));

	/* Type faces. Trebuchet MS is used for ALL headings — a system-font stack
	   so there is zero font-file cost (SPEC §3.2 says self-host, but Trebuchet
	   is a system font the client specifically requested; the self-hosted
	   Archivo/Anton WOFF2s remain on disk for the editor picker but are no
	   longer preloaded or referenced in heading CSS). Body stays Source Sans 3. */
	--teda-font-display: 'Trebuchet MS', 'Lucida Grande', 'Arial', sans-serif;
	--teda-font-heading: 'Trebuchet MS', 'Lucida Grande', 'Arial', sans-serif;
	--teda-font-body:    var(--theme-font-family, 'Source Sans 3', system-ui, sans-serif);

	/* Fluid type scale (§B.1). */
	--teda-fs-display: clamp(2.7rem, 7.2vw, 5.1rem);
	--teda-fs-h1:      clamp(2.4rem, 6.4vw, 4.6rem);
	--teda-fs-h2:      clamp(2.3rem, 6vw, 4rem);
	--teda-fs-h3:      clamp(2.2rem, 5vw, 3.4rem);
	--teda-fs-h4:      clamp(2rem, 4.6vw, 3.1rem);
	--teda-fs-h5:      clamp(1.7rem, 3.4vw, 2.4rem);
	--teda-fs-h6:      clamp(1.6rem, 3.4vw, 2.3rem);
	--teda-fs-body:    clamp(1.05rem, 2vw, 1.24rem);
	--teda-fs-stat:    clamp(56px, 8vw, 104px);

	/* Spacing & shape. */
	--teda-section-y: clamp(56px, 8vw, 96px);
	--teda-gutter:    clamp(16px, 4vw, 28px);
	--teda-measure:   68ch;
	--teda-radius:    4px;
	--teda-tap:       44px;
	--teda-border:    color-mix(in srgb, var(--teda-green) 12%, transparent);

	/*
	 * Shield motif (D5 contract). TODO(B7): drop the traced shield.svg into
	 * assets/motif/ — swapping it in must change nothing else. Until then a 2px
	 * brown rule stands in, both here (CSS-referenced form) and in
	 * teda_shield_motif() (PHP).
	 */
	--teda-motif: linear-gradient(var(--teda-green), var(--teda-green));
}

/* Headings adopt the TEDA faces (SPEC §3.2). Trebuchet MS for all headings,
   self-hosted fallback only where explicitly needed. */
h1, h2, .teda-display {
	font-family: var(--teda-font-display);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: 0.01em;
}

h3, h4, h5, h6 {
	font-family: var(--teda-font-heading);
	font-weight: 700;
	line-height: 1.15;
}

/* Section rhythm utilities (P05 task 6). Width from Blocksy container vars. */
.teda-section {
	padding-block: var(--teda-section-y);
}

.teda-section__inner {
	max-width: var(--theme-content-width, var(--theme-container-width, 1200px));
	margin-inline: auto;
	/* NOT --theme-container-edge-spacing: Blocksy sets that to 90vw, which as
	   padding would blow the box out past its max-width. Use a real gutter token. */
	padding-inline: var(--teda-gutter, 24px);
}

.teda-section--sand {
	background: var(--teda-sand);
}

.teda-section--green {
	background: var(--teda-green);
	color: var(--teda-white);
}

.teda-section--green :is(h1, h2, h3, h4, h5, h6) {
	color: var(--teda-white);
}

.teda-section--brown {
	background: var(--teda-brown);
	color: var(--teda-white);
}

.teda-section--brown :is(h1, h2, h3, h4, h5, h6) {
	color: var(--teda-white);
}

/* Donate CTA in the header (SPEC §4): a contrasting green button that stands
   out from the header. White on green passes AA (§3.1). */
.menu-item.teda-donate > a {
	display: inline-flex;
	align-items: center;
	min-height: var(--teda-tap);
	padding-inline: 1.1em;
	border-radius: var(--teda-radius);
	background: var(--teda-green);
	color: var(--teda-white) !important;
	font-weight: 700;
}

.menu-item.teda-donate > a:hover,
.menu-item.teda-donate > a:focus {
	background: color-mix(in srgb, var(--teda-green) 85%, black);
}

/* Shield motif rendering. Real SVG (when B7 lands) inherits currentColor; the
   fallback is a 2px green rule. */
.teda-motif {
	display: block;
	color: var(--teda-green);
}

.teda-motif--fallback {
	height: 2px;
	background: var(--teda-green);
	border: 0;
}

.teda-motif--mark.teda-motif--fallback {
	width: 2.5rem;
	height: 3px;
}

.teda-motif--watermark.teda-motif--fallback {
	display: none;
}