/* Shared light/dark theme tokens for every site/ page, plus the small set
   of utility classes that replace the hardcoded white-opacity/hex Tailwind
   arbitrary values every page used to carry individually.

   Same --mx-* token values as shiny-app/R/ui.R (and this repo's own
   site/quiz-practice.html before it was pointed at this shared file) --
   the point of this file is that the coding-problem app, the quiz bank,
   and the rest of the site are one product with one palette, not three
   that happen to look similar. Keep values in sync with shiny-app/R/ui.R
   if that ever changes.

   Toggle mechanics live in assets/theme-init.js (early, no-flash
   application) and assets/nav-auth.js (the toggle button + persistence) --
   this file only defines what the tokens/utilities resolve to. */

:root {
  --mx-bg-rgb: 17 17 17;           /* #111111 */
  --mx-bg-chrome: #0A0A0A;         /* nav / user-dropdown darkest surface */
  --mx-bg-raise: #1A1A1A;          /* cards, dropdown panels, modals */
  --mx-bg-raise-2: #151515;        /* code/output blocks, sunken surfaces */
  --mx-bg-raise-3: #252525;

  --mx-ink-rgb: 200 200 200;       /* #C8C8C8 */
  --mx-ink-soft: #B4B4B4;
  --mx-ink-dim: #A0A0A0;
  --mx-ink-dim-2: #909090;
  --mx-ink-faint: #666666;
  --mx-ink-faint-2: #505050;
  --mx-ink-faintest: #333333;
  --mx-ink-bright: #e5e7eb;

  --mx-accent-rgb: 154 107 154;    /* #9A6B9A */
  --mx-accent-2: #7A4E7A;

  /* Difficulty/status colours: dark-mode values. See the light override
     below for the four that need darkening there for contrast. */
  --mx-diff-easy: #3ab89a;
  --mx-diff-easy-rgb: 58 184 154;
  --mx-diff-medium: #d4a84e;
  --mx-diff-medium-rgb: 212 168 78;
  --mx-diff-hard: #c93d5e;
  --mx-diff-hard-rgb: 201 61 94;
  --mx-good: #10b981;
  --mx-bad-2: #f87171;

  --mx-tint-rgb: 255 255 255;      /* white-opacity overlays (borders, hovers) */
}

[data-theme='light'] {
  --mx-bg-rgb: 250 250 250;        /* #FAFAFA */
  --mx-bg-chrome: #FFFFFF;
  --mx-bg-raise: #FFFFFF;
  --mx-bg-raise-2: #F3F3F3;
  --mx-bg-raise-3: #ECECEC;

  --mx-ink-rgb: 26 26 26;          /* #1A1A1A */
  --mx-ink-soft: #333333;
  --mx-ink-dim: #4A4A4A;
  --mx-ink-dim-2: #5C5C5C;
  --mx-ink-faint: #767676;
  --mx-ink-faint-2: #8A8A8A;
  --mx-ink-faintest: #B0B0B0;
  --mx-ink-bright: #000000;

  /* accent colour is deliberately unchanged -- only neutral surfaces and
     text flip with the theme. Difficulty/status colours are the
     EXCEPTION: code review (on the matching shiny-app tokens) found every
     one of them except Hard fails WCAG's 4.5:1 floor for normal text
     against a white/near-white surface. Dark-mode values against white:
     easy ~2.47:1, good ~2.54:1, medium ~2.21:1, bad-2 ~2.77:1 (hard's
     #c93d5e already clears it). Darkened here, same hue, each ~4.8-5.5:1
     against white. */
  --mx-diff-easy: #0f766e;
  --mx-diff-easy-rgb: 15 118 110;
  --mx-diff-medium: #96650d;
  --mx-diff-medium-rgb: 150 101 13;
  --mx-good: #047857;
  --mx-bad-2: #dc2626;

  --mx-tint-rgb: 0 0 0;
}

body {
  background-color: rgb(var(--mx-bg-rgb));
  transition: background-color 0.15s ease;
}

/* ---- Nav / chrome ---- */
.mx-nav { background-color: var(--mx-bg-chrome); }

/* ---- Theme toggle button, injected into every page's nav by
   assets/nav-auth.js ---- */
.mx-theme-btn {
  background: var(--mx-bg-raise);
  border: 1px solid rgb(var(--mx-tint-rgb) / 0.10);
  color: var(--mx-ink-dim-2);
  width: 32px; height: 32px; padding: 0; font-size: 15px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.mx-theme-btn:hover { color: var(--mx-ink-soft); border-color: rgb(var(--mx-tint-rgb) / 0.18); }

/* ---- Card / raised-surface backgrounds, replacing bg-[#161616] etc. ---- */
.mx-bg-raise   { background-color: var(--mx-bg-raise); }
.mx-bg-raise-2 { background-color: var(--mx-bg-raise-2); }
.mx-bg-chrome  { background-color: var(--mx-bg-chrome); }

/* ---- Border-opacity utilities, replacing border-white/[x] ---- */
.mxb-04 { border-color: rgb(var(--mx-tint-rgb) / 0.04); }
.mxb-05 { border-color: rgb(var(--mx-tint-rgb) / 0.05); }
.mxb-06 { border-color: rgb(var(--mx-tint-rgb) / 0.06); }
.mxb-07 { border-color: rgb(var(--mx-tint-rgb) / 0.07); }
.mxb-10 { border-color: rgb(var(--mx-tint-rgb) / 0.10); }
.mxb-12 { border-color: rgb(var(--mx-tint-rgb) / 0.12); }
.mxb-15 { border-color: rgb(var(--mx-tint-rgb) / 0.15); }
.mxb-20 { border-color: rgb(var(--mx-tint-rgb) / 0.20); }
.mxb-h15:hover { border-color: rgb(var(--mx-tint-rgb) / 0.15); }
.mxb-h20:hover { border-color: rgb(var(--mx-tint-rgb) / 0.20); }
.mxb-f20:focus { border-color: rgb(var(--mx-tint-rgb) / 0.20); }

/* ---- Background-opacity utilities, replacing bg-white/[x] ---- */
.mxbg-02 { background-color: rgb(var(--mx-tint-rgb) / 0.02); }
.mxbg-05 { background-color: rgb(var(--mx-tint-rgb) / 0.05); }
.mxbg-06 { background-color: rgb(var(--mx-tint-rgb) / 0.06); }
.mxbg-07 { background-color: rgb(var(--mx-tint-rgb) / 0.07); }
.mxbg-10 { background-color: rgb(var(--mx-tint-rgb) / 0.10); }
.mxbg-h02:hover { background-color: rgb(var(--mx-tint-rgb) / 0.02); }
.mxbg-h04:hover { background-color: rgb(var(--mx-tint-rgb) / 0.04); }
.mxbg-h05:hover { background-color: rgb(var(--mx-tint-rgb) / 0.05); }

/* ---- Divide utility (Tailwind's divide-* applies to the > * + * selector) ---- */
.mx-divide-04 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(var(--mx-tint-rgb) / 0.04); }

/* ---- Difficulty text colours ---- */
.q-diff-easy   { color: var(--mx-diff-easy); }
.q-diff-medium { color: var(--mx-diff-medium); }
.q-diff-hard   { color: var(--mx-diff-hard); }