/*
 * 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. */
	--teda-brown:      var(--theme-palette-color-1, #6A2104);
	--teda-brown-deep: var(--theme-palette-color-2, #4A1703);
	--teda-blue:       var(--theme-palette-color-3, #046BB1);
	--teda-green:      var(--theme-palette-color-4, #23642A);
	--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-mid:  color-mix(in srgb, var(--teda-brown) 80%, var(--teda-white));
	--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-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 (P04 families). Body follows Blocksy's root typography. */
	--teda-font-display: 'Anton', Impact, sans-serif;
	--teda-font-heading: 'Archivo', system-ui, 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-brown) 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-brown), var(--teda-brown));
}

/* Headings adopt the TEDA faces (SPEC §3.2). Buttons/forms/cards stay Customizer. */
h1, h2, .teda-display {
	font-family: var(--teda-font-display);
	font-weight: 400;
	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;
}

/* Readable measure on long-form content only (SPEC §3.2: 68ch cap). */
.entry-content p,
.entry-content li {
	max-width: var(--teda-measure);
}

/* 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--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 so it stands
   out from the brown-heavy 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 brown rule. */
.teda-motif {
	display: block;
	color: var(--teda-brown);
}

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

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

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