/* ============================================================
   theme.css — two independent display axes, both opt-in.
   Loaded site-wide via each page's head + js/theme.js.

   Axis 1  data-theme="dark"        light  <->  dark
   Axis 2  data-palette="accessible" riso  <->  high-contrast, colourblind-safe

   Everything is driven by redefining the ~12 core tokens from
   base.css. Because the site's chrome and components read those tokens
   (var(--ink), var(--paper), var(--riso-pink)…), overriding them here
   restyles the whole page with no per-component work.

   The default (no attributes) stays the riso brand exactly as it was.
   ============================================================ */

/* ── DARK · riso identity, dark ground ─────────────────────── */
:root[data-theme="dark"] {
  --paper:            #14201b;
  --paper-white:      #1b2a24;
  --ink:              #e9f1ea;
  --ink-dim:          #b1c3b8;
  --ink-faint:        #7d8f85;

  --riso-pink:        #ff9ec4;
  --riso-pink-deep:   #ffb3d1;   /* emphasis reads *lighter* on dark */
  --riso-green:       #46d99f;
  --riso-green-deep:  #6fe6b8;
  --riso-coral:       #ff9e80;
  --riso-yellow:      #f2cf5c;

  --line:             rgba(233, 241, 234, 0.18);
  --line-strong:      rgba(233, 241, 234, 0.34);
}

/* ── ACCESSIBLE · light ────────────────────────────────────
   High contrast (near-black ink on white, AA+), and the pink/green
   pairing — the red-green colourblind trap — is replaced by
   blue/orange, which stays distinguishable in every common colour-
   vision deficiency. Hue never carries meaning alone on this site
   (labels, borders and shape do too), which is what makes the swap
   safe rather than merely different. */
:root[data-palette="accessible"] {
  --paper:            #ffffff;
  --paper-white:      #ffffff;
  --ink:              #111418;
  --ink-dim:          #3d444d;   /* AA on white */
  --ink-faint:        #5a626c;   /* lifted from the faint riso tone */

  --riso-pink:        #c2410c;   /* orange, was pink */
  --riso-pink-deep:   #9a3412;
  --riso-green:       #1d63c9;   /* blue, was green */
  --riso-green-deep:  #174ea6;
  --riso-coral:       #b45309;   /* amber-brown, third distinct hue */
  --riso-yellow:      #a16207;   /* darkened so it holds on white */

  --line:             rgba(17, 20, 24, 0.30);
  --line-strong:      rgba(17, 20, 24, 0.52);
}

/* ── ACCESSIBLE · dark ─────────────────────────────────────
   Same blue/orange logic, brightened to hold contrast on a near-black
   neutral ground. */
:root[data-theme="dark"][data-palette="accessible"] {
  --paper:            #0c0e12;
  --paper-white:      #15181e;
  --ink:              #f4f6f9;
  --ink-dim:          #c3ccd6;
  --ink-faint:        #98a2ae;

  --riso-pink:        #ff9e5c;   /* orange */
  --riso-pink-deep:   #ffb784;
  --riso-green:       #6ba6f5;   /* blue */
  --riso-green-deep:  #9cc4fb;
  --riso-coral:       #f0a35e;
  --riso-yellow:      #e2c14e;

  --line:             rgba(244, 246, 249, 0.22);
  --line-strong:      rgba(244, 246, 249, 0.40);
}

/* Smooth the switch, but never fight reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  body { transition: background-color 0.18s ease, color 0.18s ease; }
}

/* ============================================================
   The control. A small fixed panel, bottom-right, legible in all four
   modes because it too is built from tokens.
   ============================================================ */
.a11y-controls {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--paper-white);
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--riso-green);
}
.a11y-controls-title {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 2px 2px;
}
.a11y-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 13px;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.a11y-btn:hover { border-color: var(--ink); }
.a11y-btn svg { width: 15px; height: 15px; flex: none; }
.a11y-btn .on-dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: transparent;
  margin-left: auto;
}
/* Pressed = this mode is active. */
.a11y-btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper-white);
  border-color: var(--ink);
}
.a11y-btn[aria-pressed="true"] .on-dot { background: var(--riso-green); border-color: var(--paper-white); }
.a11y-btn:focus-visible { outline: 3px solid var(--riso-pink-deep); outline-offset: 2px; }

/* The moon shows in light, the sun in dark — mirrors the games' toggle. */
.a11y-btn .icon-sun { display: none; }
:root[data-theme="dark"] .a11y-btn .icon-sun { display: block; }
:root[data-theme="dark"] .a11y-btn .icon-moon { display: none; }

@media (max-width: 560px) {
  /* Collapse labels on small screens; icons + pressed state still read. */
  .a11y-controls { right: 10px; bottom: 10px; padding: 8px; }
  .a11y-btn .a11y-lbl { display: none; }
  .a11y-btn { padding: 9px; }
  .a11y-btn .on-dot { margin-left: 4px; }
}

/* Cosmetic leak handling: the lesson-card icons are external two-tone
   (green/pink) SVG images, so page tokens can't reach inside them. In
   the accessible palette that green/pink clashes with the blue/orange
   scheme, so neutralise them to a quiet monochrome - decorative only,
   no meaning is carried by their colour. */
:root[data-palette="accessible"] .lesson-card-icon { filter: grayscale(1) contrast(0.95); }

/* Flat type in the accessible palette. The riso "misregistration" offset
   (a coloured text-shadow ghost behind headings) is a brand flourish, but
   it doubles the letterforms and lowers legibility - the opposite of what
   a high-contrast mode is for. Strip it so accessible type is crisp. */
:root[data-palette="accessible"] * { text-shadow: none !important; }
:root[data-palette="accessible"] main::after { opacity: 0 !important; }