/* ============================================================================
   theme.css — the two themes. 004 §1 (amended 2026-07-13).

     light  →  paper white, ink navy-black.        (system default)
     dark   →  void black, gold accent.            (the arrival's palette)

   The navy dark scheme is retired. Crossing from the landing into a lesson now
   stays in one world.

   Gold is RARE: focus, the active choice, and a padlock. Nothing else.
   ========================================================================== */

:root {
  --paper: #f7f9fd;
  --panel: #ffffff;
  --ink: #101828;
  --ink-soft: #5d6b84;
  --hairline: #e5eaf3;

  /* Nested fills — a box inside a card, a chip, the phone chassis.
     On white these RECESS (paper sits below panel). In the void they must
     LIFT: #040404 inside a #0d0d0d card is a hole, not a surface. Every
     inner fill reads --inset, never --paper. */
  --inset: #f7f9fd;

  --gold: #101828;                    /* light: "accent" collapses to ink */
  --glow: rgba(16,24,40,.06);

  --acc-tech: #3d7cf0;                /* 004 §2 — region eyebrow only */

  --role-locked: #8a5f14;
  --role-wrong:  #b42318;
  --role-live:   rgba(16,24,40,.06);  /* emphasis is contrast, not colour */

  --btn-bg: var(--ink);
  --btn-fg: var(--panel);

  /* A selected control must LOOK selected. On white a border is enough; on the
     void it is not — a dark outline on a dark field disappears. So selection
     carries a fill, and in the void that fill is a whisper of gold. */
  --sel-bg: rgba(16,24,40,.05);
  --sel-edge: var(--ink);

  --font-body: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- the void ---------------------------------------------------------- */
/* The void has THREE levels, and only the deepest one is black:
     page   #040404   the void itself — nothing else may be this colour
     panel  #101013   a card resting on it
     inset  #1c1c20   a box, a chip, a phone frame resting on the card
   A #0d0d0d card on a #040404 page is nine shades of difference: it reads as a
   hole rather than an object. Each step up is visible on a bad monitor. */
:root[data-theme="dark"] {
  --paper: #040404;                   /* the ONLY near-black on the page */
  --panel: #101013;
  --inset: #1c1c20;                   /* lifts ABOVE the panel, never below */
  --ink: #f7f7f7;
  --ink-soft: #9e9e9e;
  --hairline: rgba(247,247,247,.11);

  --gold: #ffd34d;
  --glow: #ffc107;

  --acc-tech: #ffd34d;                /* the eyebrow warms to gold in the void */

  --role-locked: #ffd34d;             /* a constant IS the thing held fixed */
  --role-wrong:  #ff9d94;
  --role-live:   rgba(247,247,247,.08);

  --btn-bg: #f7f7f7;                  /* inverted pill — gold stays precious */
  --btn-fg: #0b0b0e;             /* not the void — reserved for the page alone */

  --sel-bg: rgba(255,211,77,.10);     /* selected = lit, not just outlined */
  --sel-edge: #ffd34d;
}

/* Follow the system until the learner says otherwise. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #040404;
    --panel: #101013;
    --inset: #1c1c20;
    --ink: #f7f7f7;
    --ink-soft: #9e9e9e;
    --hairline: rgba(247,247,247,.11);
    --gold: #ffd34d;
    --glow: #ffc107;
    --acc-tech: #ffd34d;
    --role-locked: #ffd34d;
    --role-wrong: #ff9d94;
    --role-live: rgba(247,247,247,.08);
    --btn-bg: #f7f7f7;
    --btn-fg: #0b0b0e;             /* not the void — reserved for the page alone */
    --sel-bg: rgba(255,211,77,.10);
    --sel-edge: #ffd34d;
  }
}

/* ---- the switch -------------------------------------------------------- */
.theme-btn {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  font-size: 14px; cursor: pointer;
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--hairline); border-radius: 999px;
  transition: color .2s ease, border-color .2s ease, transform .45s cubic-bezier(0.34,1.56,0.64,1);
}
.theme-btn:hover { color: var(--ink); border-color: var(--ink-soft); }
.theme-btn.spin { transform: rotate(360deg); }   /* 005: theme toggle flip */

@media (prefers-reduced-motion: reduce) {
  .theme-btn { transition: none; }
}