/* tokens.css — lives at assets/css/ in the ThaiTao Directory plugin. The ONLY file that may hold colour values. */

/*
 * LifeLearn palette (chosen 23 Sep 2026).
 * Rule: navy text on the brand teal, never white. Gold only on dark backgrounds.
 *
 * Text/background pairs used by the plugin's CSS (checked by tools/acceptance.py, A21):
 * @pair --tt-text on --tt-bg
 * @pair --tt-text on --tt-white
 * @pair --tt-body on --tt-bg
 * @pair --tt-body on --tt-white
 * @pair --tt-body on --tt-faint
 * @pair --tt-secondary on --tt-bg
 * @pair --tt-secondary on --tt-white
 * @pair --tt-secondary on --tt-faint
 * @pair --tt-faint-text on --tt-white
 * @pair --tt-faint-text on --tt-faint
 * @pair --tt-faint-text on --tt-bg
 * @pair --tt-navy on --tt-bg
 * @pair --tt-navy on --tt-white
 * @pair --tt-navy on --tt-teal
 * @pair --tt-navy on --tt-panel
 * @pair --tt-navy on --tt-faint
 * @pair --tt-navy on --tt-teal-tint
 * @pair --tt-text on --tt-panel
 * @pair --tt-body on --tt-panel
 * @pair --tt-teal-deep on --tt-white
 * @pair --tt-teal-deep on --tt-bg
 * @pair --tt-teal-deep on --tt-faint
 * @pair --tt-teal-deep on --tt-teal-tint
 * @pair --tt-white on --tt-navy
 * @pair --tt-white on --tt-teal-deep
 * @pair --tt-on-navy on --tt-navy
 * @pair --tt-gold on --tt-navy
 * @pair --tt-danger on --tt-white
 * @pair --tt-danger on --tt-danger-tint
 * @pair --tt-body on --tt-teal-tint
 * @pair --tt-white on --tt-danger
 */

@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 400 800;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/figtree-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Palette */
	--tt-navy: #0E1B3D;
	--tt-teal: #0E9F8B;
	--tt-teal-deep: #0A6E62;
	--tt-teal-tint: #E6F4F1;
	--tt-bg: #F9FAFB;
	--tt-white: #FFFFFF;
	--tt-text: #111827;
	--tt-body: #2D3748;
	--tt-secondary: #5A6577;
	--tt-panel: #FFE9B8;
	--tt-gold: #C99A3F;
	--tt-border: #E2E8F0;
	--tt-border-strong: #8A94A6;
	--tt-faint: #F1F3F6;
	--tt-faint-text: #5B6475;
	--tt-on-navy: #D6DCE8;
	--tt-danger: #B42318;
	--tt-danger-tint: #FEF3F2;
	--tt-shadow: rgba(14, 27, 61, 0.10);
	--tt-shadow-strong: rgba(14, 27, 61, 0.18);
	--tt-scrim: rgba(14, 27, 61, 0.55);

	/* Type */
	--tt-font-head: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", "Leelawadee UI", sans-serif;
	--tt-font-body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", "Leelawadee UI", sans-serif;

	/* Shape and space */
	--tt-radius: 12px;
	--tt-radius-sm: 8px;
	--tt-radius-pill: 999px;
	--tt-gap: 16px;
	--tt-target: 44px;
	--tt-max: 1280px;
	--tt-focus-width: 3px;

	/* Checkbox and radio drawings (SVG data) */
	--tt-check-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect x='11' y='11' width='22' height='22' rx='4' fill='%23FFFFFF' stroke='%238A94A6' stroke-width='2'/%3E%3C/svg%3E");
	--tt-check-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect x='11' y='11' width='22' height='22' rx='4' fill='%230A6E62' stroke='%230A6E62' stroke-width='2'/%3E%3Cpath d='M16 22l4 4 8-9' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--tt-radio-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Ccircle cx='22' cy='22' r='11' fill='%23FFFFFF' stroke='%238A94A6' stroke-width='2'/%3E%3C/svg%3E");
	--tt-radio-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Ccircle cx='22' cy='22' r='11' fill='%23FFFFFF' stroke='%230A6E62' stroke-width='2'/%3E%3Ccircle cx='22' cy='22' r='6' fill='%230A6E62'/%3E%3C/svg%3E");
}