/* ============================================================================
   categories.css

   Canonical CSS palette for the eight Thai-character categories. Mirrored in
   C# at LTN/Data/ThaiChars.cs (Palette dictionary) — keep the two in sync.

   Usage from scoped component CSS:

       .my-button {
           background-color: var(--cat-long-vowel-face);
       }
       .my-button:hover {
           background-color: var(--cat-long-vowel-dark);
       }

   Or, apply a utility class to an element so it inherits both colours via
   the local --face / --dark vars:

       <div class="cat-long-vowel">…</div>
       .my-button { background-color: var(--face); color: #fff; }

   Loaded from wwwroot/index.html alongside app.css / tutorial.css /
   authentication.css.
   ============================================================================ */

:root {
	/* Long vowels — Cobalt Pop */
	--cat-long-vowel-face: #3D6BFF;
	--cat-long-vowel-dark: #1A3FCC;
	/* Short vowels — Sky Surge */
	--cat-short-vowel-face: #1AAEFF;
	--cat-short-vowel-dark: #0077CC;
	/* High consonants — Ruby Pop */
	--cat-high-consonant-face: #D63D5F;
	--cat-high-consonant-dark: #A82A48;
	/* Mid consonants — Tangerine Pop */
	--cat-mid-consonant-face: #FF8C2A;
	--cat-mid-consonant-dark: #CC5500;
	/* Low paired consonants — Kiwi Pop */
	--cat-low-paired-face: #5FE15F;
	--cat-low-paired-dark: #2EAA2E;
	/* Low unpaired consonants — Forest Pop */
	--cat-low-unpaired-face: #22C84A;
	--cat-low-unpaired-dark: #0F7A22;
	/* Tone marks — Sunny Pop */
	--cat-tone-mark-face: #FFC700;
	--cat-tone-mark-dark: #B38F00;
	/* Special — Orchid Pop */
	--cat-special-face: #9B59B6;
	--cat-special-dark: #6C3483;
}

/* ──────────────────────────────────────────────────────────────────────────
   Utility classes: applying .cat-* to an element exposes that category's
   face and dark colours as local --face / --dark custom properties, so
   downstream component CSS can reference them generically without knowing
   which category was picked at runtime.
   ────────────────────────────────────────────────────────────────────────── */

.cat-long-vowel {
	--face: var(--cat-long-vowel-face);
	--dark: var(--cat-long-vowel-dark);
}

.cat-short-vowel {
	--face: var(--cat-short-vowel-face);
	--dark: var(--cat-short-vowel-dark);
}

.cat-high-consonant {
	--face: var(--cat-high-consonant-face);
	--dark: var(--cat-high-consonant-dark);
}

.cat-mid-consonant {
	--face: var(--cat-mid-consonant-face);
	--dark: var(--cat-mid-consonant-dark);
}

.cat-low-paired {
	--face: var(--cat-low-paired-face);
	--dark: var(--cat-low-paired-dark);
}

.cat-low-unpaired {
	--face: var(--cat-low-unpaired-face);
	--dark: var(--cat-low-unpaired-dark);
}

.cat-tone-mark {
	--face: var(--cat-tone-mark-face);
	--dark: var(--cat-tone-mark-dark);
}

.cat-special {
	--face: var(--cat-special-face);
	--dark: var(--cat-special-dark);
}