/* Module colour identities — scoped, reusable tokens.
   Wrap anything that belongs to a module in its class (.mod-blender,
   .mod-grillz, .mod-duo, .mod-workshop) and use the tokens below. Nothing here
   changes the page around it, so entering one module never recolours another.

     --mod        the identity colour (fills: bars, tiles, buttons, selected states)
     --onMod      text/icons drawn ON --mod
     --modInk     the identity colour as readable text/icons on the page background
     --modSoft    tinted background for chips, highlights and selected rows
     --modEdge    outline that keeps a light fill visible (WCAG non-text contrast)

   Contrast (checked by tools/test-themes.mjs, WCAG 2.1):
     text  ≥ 4.5:1 for --modInk on the card colour and --onMod on --mod;
     fills ≥ 3:1 against the card, or drawn with --modEdge. */

.mod-blender  { --mod: #0A62D0; --onMod: #FFFFFF; --modInk: #0A62D0; --modSoft: rgba(10,98,208,0.10); --modEdge: none; }
.mod-grillz   { --mod: #C9952E; --onMod: #1D1D1F; --modInk: #8A5D00; --modSoft: rgba(201,149,46,0.16); --modEdge: inset 0 0 0 1px rgba(58,38,0,0.45); --modMetal: linear-gradient(140deg,#F6DE9C 0%,#D7A845 45%,#A9781F 100%); }
.mod-duo      { --mod: #CCFF00; --onMod: #080808; --modInk: #4A6600; --modSoft: rgba(204,255,0,0.30); --modEdge: inset 0 0 0 1px rgba(8,8,8,0.45); }
.mod-workshop { --mod: #167D91; --onMod: #FFFFFF; --modInk: #126A7B; --modSoft: rgba(182,230,229,0.55); --modEdge: none; --modAqua: #B6E6E5; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .mod-blender  { --mod: #4C9DFF; --onMod: #000000; --modInk: #4C9DFF; --modSoft: rgba(76,157,255,0.16); }
  :root:not([data-theme=light]) .mod-grillz   { --mod: #E8B04A; --onMod: #1D1D1F; --modInk: #E8B04A; --modSoft: rgba(232,176,74,0.16); --modEdge: none; }
  :root:not([data-theme=light]) .mod-duo      { --mod: #CCFF00; --onMod: #080808; --modInk: #CCFF00; --modSoft: rgba(204,255,0,0.14); --modEdge: none; }
  :root:not([data-theme=light]) .mod-workshop { --mod: #B6E6E5; --onMod: #0B2A30; --modInk: #B6E6E5; --modSoft: rgba(22,125,145,0.32); }
}
:root[data-theme=dark] .mod-blender  { --mod: #4C9DFF; --onMod: #000000; --modInk: #4C9DFF; --modSoft: rgba(76,157,255,0.16); }
:root[data-theme=dark] .mod-grillz   { --mod: #E8B04A; --onMod: #1D1D1F; --modInk: #E8B04A; --modSoft: rgba(232,176,74,0.16); --modEdge: none; }
:root[data-theme=dark] .mod-duo      { --mod: #CCFF00; --onMod: #080808; --modInk: #CCFF00; --modSoft: rgba(204,255,0,0.14); --modEdge: none; }
:root[data-theme=dark] .mod-workshop { --mod: #B6E6E5; --onMod: #0B2A30; --modInk: #B6E6E5; --modSoft: rgba(22,125,145,0.32); }

/* Course-identity tile used in the learning library and progress pages. */
.mod-tile { background: var(--mod); color: var(--onMod); box-shadow: var(--modEdge); }
.mod-grillz .mod-tile { background: var(--modMetal); color: #3A2600; }
.mod-bar  { background: var(--mod); box-shadow: var(--modEdge); }