/* CCAF Village design tokens ("Emblem"): see docs/06-visual-design-spec.md.
   Only the colours of the CCAF emblem are used: deep green, golden yellow, red, black,
   white and the star gold, plus lighter tints and darker shades of those same colours.
   Contrast ratios in comments are measured against white unless noted. */

:root {
	/* The emblem */
	--c-green: #0c5424;           /* emblem field: 9.09; white on it 9.09 */
	--c-green-deep: #083d1a;      /* shade */
	--c-green-mid: #2e7d46;       /* tint */
	--c-green-soft: #9fcfae;      /* tint */
	--c-green-pale: #e3f1e7;      /* tint */
	--c-green-wash: #f2f8f4;      /* tint */
	--c-yellow: #fcd800;          /* emblem lettering: never text on white; green on it 6.48, black 13.30 */
	--c-yellow-deep: #e0bf00;     /* shade */
	--c-yellow-soft: #fff1a8;     /* tint */
	--c-yellow-wash: #fffbe0;     /* tint */
	--c-red: #e41824;             /* emblem Africa outline: 4.71, large text and shapes */
	--c-red-ink: #c0141e;         /* shade: 6.25; white on it 6.25 */
	--c-red-soft: #f8c9cc;        /* tint */
	--c-red-wash: #fff1f1;        /* tint */
	--c-black: #111311;           /* emblem ring: 18.67 */
	--c-grey: #4a4f4b;            /* black tint: 8.36 */
	--c-star: #c9a24a;            /* emblem stars, decorative */
	--c-ink: var(--c-black);

	/* Earlier token names, mapped onto emblem colours so plugin and template styles keep working */
	--c-forest: var(--c-green);
	--c-deep: var(--c-green-deep);
	--c-gold: var(--c-yellow);
	--c-gold-ink: var(--c-green);
	--c-ochre: var(--c-yellow-deep);
	--c-ochre-ink: var(--c-green);
	--c-clay: var(--c-red-soft);
	--c-terracotta: var(--c-red);
	--c-terracotta-ink: var(--c-red-ink);
	--c-umber: var(--c-black);
	--c-savannah: var(--c-yellow);
	--c-leaf: var(--c-green-mid);
	--c-sprout: var(--c-green-soft);
	--c-river: var(--c-green-mid);
	--c-river-ink: var(--c-green);
	--c-teal: var(--c-green-mid);
	--c-teal-ink: var(--c-green);
	--c-indigo: var(--c-black);
	--c-plum: var(--c-green-deep);
	--c-sand: var(--c-yellow-wash);
	--c-mint: var(--c-green-wash);
	--c-night: #0a1f10;           /* green shade, footer */
	--c-paper: #ffffff;
	--c-ivory: #ffffff;           /* light text on dark surfaces */

	/* Semantic roles */
	--bg: #ffffff;
	--surface: #ffffff;
	--surface-2: var(--c-green-wash);
	--text: var(--c-black);
	--text-muted: var(--c-grey);  /* 8.36; 8.59 on green wash */
	--heading: var(--c-green);
	--link: var(--c-green);       /* 9.09 */
	--accent: var(--c-red-ink);
	--accent-hover: #9c0f18;
	--on-accent: #fff;
	--primary: var(--c-green);
	--primary-hover: var(--c-green-deep);
	--on-primary: #fff;
	--selected: var(--c-green);
	--on-selected: #fff;
	--border: rgb(12 84 36 / 0.14);
	--border-strong: rgb(12 84 36 / 0.3);
	--focus: var(--c-black);
	--success: var(--c-green);
	--warn: #6b5c00;              /* yellow shade: 6.72 */
	--error: var(--c-red-ink);

	/* Washes and emblem surfaces */
	--wash-dawn: linear-gradient(180deg, #ffffff 0%, var(--c-yellow-wash) 100%);
	--wash-sky: linear-gradient(180deg, var(--c-green-wash) 0%, #ffffff 100%);
	--sky-dawn:
		radial-gradient(50% 70% at 85% 0%, rgb(252 216 0 / 0.28), transparent 70%),
		radial-gradient(45% 60% at 0% 100%, rgb(228 24 36 / 0.22), transparent 70%),
		linear-gradient(150deg, #0c5424 0%, #083d1a 55%, #0a1f10 100%);
	--glow: 0 0 0 1px rgb(252 216 0 / 0.45), 0 10px 32px -8px rgb(252 216 0 / 0.6);
	--emblem-stripe: linear-gradient(90deg, var(--c-green) 0 25%, var(--c-yellow) 25% 50%, var(--c-red) 50% 75%, var(--c-black) 75% 100%);

	/* Village scene (daylight), all emblem tints */
	--sky-top: #ffffff;
	--sky-bottom: var(--c-yellow-wash);
	--sun: var(--c-yellow);
	--mountain-far: #d3e8da;
	--mountain-near: #a9d3b6;
	--mesa: var(--c-yellow-soft);
	--ridge-far: #cfe6d7;
	--ridge-near: #b3dabf;
	--ground: #a6d4b2;
	--ground-2: #79bc8c;
	--field: var(--c-yellow-soft);
	--path: #fffbe0;
	--river: var(--c-green-mid);
	--river-deep: var(--c-green);
	--river-edge: var(--c-green-deep);
	--roof: var(--c-red);
	--wall: #ffffff;
	--wall-shade: var(--c-green-pale);
	--earth-wall: var(--c-yellow-soft);
	--earth-wall-2: var(--c-yellow-deep);
	--glass: #d5ebdc;
	--cloud: #f2f8f4;
	--label-ink: var(--c-green);
	--window: var(--c-yellow);
	--solar: var(--c-black);
	--leaf: var(--c-green-mid);
	--leaf-2: var(--c-green);
	--trunk: var(--c-green-deep);
	--skin-1: var(--c-black);
	--skin-2: #2b2e2b;
	--skin-3: #3a3e3a;

	/* Type: a bold modern sans for display, a serif accent for quotes and mottos.
	   Noto families cover Yoruba, Igbo, Hausa, Ewe/Twi diacritics; system fonts load first. */
	--font-display: "Noto Sans Display", "Noto Sans", system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
	--font-body: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
	--font-accent: "Noto Serif Display", "Noto Serif", Georgia, "Times New Roman", serif;
	--font-ethiopic: "Noto Sans Ethiopic", "Nyala", "Abyssinica SIL", var(--font-body);
	--font-arabic: "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, var(--font-body);
	--fs--1: 0.875rem;
	--fs-0: 1.0625rem;
	--fs-1: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
	--fs-2: clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
	--fs-3: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem);
	--fs-4: clamp(2.1rem, 1.4rem + 2.9vw, 3.5rem);
	--fs-5: clamp(2.6rem, 1.5rem + 4.6vw, 5rem);
	--lh-body: 1.6;
	--lh-tight: 1.08;
	--measure: 68ch;
	--tracking-tight: -0.03em;

	/* Space & shape */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3.5rem;
	--s-8: 5.5rem;
	--gutter: 16px;
	--max: 1200px;
	--radius: 20px;
	--radius-lg: 28px;
	--radius-sm: 12px;
	--radius-pill: 999px;
	--shadow: 0 1px 2px rgb(10 40 20 / 0.06), 0 12px 32px -14px rgb(10 40 20 / 0.2);
	--shadow-lift: 0 2px 6px rgb(10 40 20 / 0.08), 0 24px 48px -18px rgb(10 40 20 / 0.32);
	--tap: 44px;

	/* Motion */
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--dur: 220ms;

	color-scheme: light dark;
}

@media (min-width: 768px) {
	:root { --gutter: 24px; }
}

/* Night village. Kept in two blocks: the media query (unless the visitor chose light)
   and the manual toggle. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #0b120d;
		--surface: #14211a;
		--surface-2: #182a20;
		--text: #ffffff;          /* 19.4 on bg */
		--text-muted: #c4cdc6;    /* 11.3; 10.0 on surface */
		--heading: #ffffff;
		--link: var(--c-yellow);  /* 11.85 on surface */
		--accent: #ff6b73;        /* red tint: 6.02 on surface */
		--accent-hover: #ff8a90;
		--on-accent: #0b120d;
		--primary: var(--c-yellow);
		--primary-hover: #ffe44d;
		--on-primary: #0b120d;    /* 13.52 */
		--selected: var(--c-yellow);
		--on-selected: #0b120d;
		--border: rgb(255 255 255 / 0.12);
		--border-strong: rgb(255 255 255 / 0.26);
		--focus: var(--c-yellow);
		--success: #8fd19e;
		--warn: var(--c-yellow);
		--error: #ff6b73;
		--wash-dawn: linear-gradient(180deg, #0f1912 0%, #121c14 100%);
		--wash-sky: linear-gradient(180deg, #0f1912 0%, #0b120d 100%);
		--shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -14px rgb(0 0 0 / 0.6);
		--shadow-lift: 0 2px 6px rgb(0 0 0 / 0.45), 0 24px 48px -18px rgb(0 0 0 / 0.7);
		--sky-top: #050a06;
		--sky-bottom: #0f2615;
		--sun: #fff6c4;
		--mountain-far: #13281a;
		--mountain-near: #183320;
		--mesa: #2a2a12;
		--ridge-far: #163020;
		--ridge-near: #1b3a25;
		--ground: #1e4129;
		--ground-2: #183522;
		--field: #3a3510;
		--path: #2f3a2a;
		--river: #2a4a33;
		--river-deep: #0f2615;
		--river-edge: var(--c-yellow);
		--wall: #dfe8e2;
		--wall-shade: #9fb3a6;
		--earth-wall: #c9c09a;
		--earth-wall-2: #8a7d2a;
		--glass: #e0c400;
		--cloud: #1c2b20;
		--label-ink: var(--c-yellow);
		--leaf: #3f8a55;
		--leaf-2: #2b6b40;
	}
}
:root[data-theme="dark"] {
	--bg: #0b120d;
	--surface: #14211a;
	--surface-2: #182a20;
	--text: #ffffff;          /* 19.4 on bg */
	--text-muted: #c4cdc6;    /* 11.3; 10.0 on surface */
	--heading: #ffffff;
	--link: var(--c-yellow);  /* 11.85 on surface */
	--accent: #ff6b73;        /* red tint: 6.02 on surface */
	--accent-hover: #ff8a90;
	--on-accent: #0b120d;
	--primary: var(--c-yellow);
	--primary-hover: #ffe44d;
	--on-primary: #0b120d;    /* 13.52 */
	--selected: var(--c-yellow);
	--on-selected: #0b120d;
	--border: rgb(255 255 255 / 0.12);
	--border-strong: rgb(255 255 255 / 0.26);
	--focus: var(--c-yellow);
	--success: #8fd19e;
	--warn: var(--c-yellow);
	--error: #ff6b73;
	--wash-dawn: linear-gradient(180deg, #0f1912 0%, #121c14 100%);
	--wash-sky: linear-gradient(180deg, #0f1912 0%, #0b120d 100%);
	--shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -14px rgb(0 0 0 / 0.6);
	--shadow-lift: 0 2px 6px rgb(0 0 0 / 0.45), 0 24px 48px -18px rgb(0 0 0 / 0.7);
	--sky-top: #050a06;
	--sky-bottom: #0f2615;
	--sun: #fff6c4;
	--mountain-far: #13281a;
	--mountain-near: #183320;
	--mesa: #2a2a12;
	--ridge-far: #163020;
	--ridge-near: #1b3a25;
	--ground: #1e4129;
	--ground-2: #183522;
	--field: #3a3510;
	--path: #2f3a2a;
	--river: #2a4a33;
	--river-deep: #0f2615;
	--river-edge: var(--c-yellow);
	--wall: #dfe8e2;
	--wall-shade: #9fb3a6;
	--earth-wall: #c9c09a;
	--earth-wall-2: #8a7d2a;
	--glass: #e0c400;
	--cloud: #1c2b20;
	--label-ink: var(--c-yellow);
	--leaf: #3f8a55;
	--leaf-2: #2b6b40;
}

/* Kadence (parent theme) follows the same palette, so its header, footer, menus and
   buttons match in light and dark mode. Doubled :root outranks Kadence's inline palette. */
:root:root {
	--global-palette1: var(--primary);
	--global-palette2: var(--primary-hover);
	--global-palette3: var(--heading);
	--global-palette4: var(--text);
	--global-palette5: var(--text-muted);
	--global-palette6: var(--text-muted);
	--global-palette7: var(--surface-2);
	--global-palette8: var(--bg);
	--global-palette9: var(--surface);
	--global-palette-btn-bg: var(--primary);
	--global-palette-btn-bg-hover: var(--primary-hover);
	--global-palette-btn: var(--on-primary);
	--global-palette-btn-hover: var(--on-primary);
	--global-body-font-family: var(--font-body);
	--global-heading-font-family: var(--font-display);
}

/* Environmental themes (SRS §8.2): two emblem accents and a wash for any section or card */
.env-forest   { --env-a: var(--c-green);  --env-b: var(--c-green-soft);  --env-tint: rgb(12 84 36 / 0.1); }
.env-desert   { --env-a: var(--c-yellow); --env-b: var(--c-yellow-deep); --env-tint: rgb(252 216 0 / 0.2); }
.env-coast    { --env-a: var(--c-green);  --env-b: var(--c-yellow);      --env-tint: rgb(12 84 36 / 0.08); }
.env-highland { --env-a: var(--c-red);    --env-b: var(--c-black);       --env-tint: rgb(228 24 36 / 0.08); }

/* Script-aware typography (SRS §8.3) */
:lang(am), :lang(ti) { font-family: var(--font-ethiopic); }
:lang(ar) { font-family: var(--font-arabic); line-height: 1.8; }