/* theme-embed.css — SpeechGenie marketing-embed skin (brief 011).
 *
 * The variant-single-lesson branch's replacement for theme-dojo.css: NO warm-wood
 * palette, NO backdrop image / ::before layer, NO lesson-selection chrome — just a
 * solid SpeechGenie-blue field behind the audio-only L2B exercise, sized for an
 * iframe embed on the SpeechGenie site.
 *
 * A THEMING LAYER over tokens.css, not a rebuild. It only retunes the handful of
 * `--l2b-*` tokens that must change for the blue field, plus a few flat fallbacks
 * the exercise screen reads in place of the (now-absent) dojo `--l2b-skin-*`
 * sprites. Custom properties pierce shadow DOM, so the component shadow roots
 * pick these up through the cascade without any per-component edit.
 *
 * Loaded after tokens.css (see index.html) so these overrides win. Nothing here
 * is `!important`; it layers cleanly on the scaffold tokens.
 */

:root {
  /* ── The one SpeechGenie-blue constant (Chris, 2026-06-22). Repoint here. ── */
  --sg-blue: #153e63;

  /* Solid blue body; slim translucent header/footer; light trim that reads on
     blue. The line-art image cell stays white (transparent-PNG drawings). */
  --l2b-bg:            var(--sg-blue);
  --l2b-bg-header:     rgba(0, 0, 0, 0.16);
  --l2b-surface:       #1d4d78;                  /* panels: a touch lighter than the field */
  --l2b-surface-hover: #235a8a;
  --l2b-border:        rgba(255, 255, 255, 0.26);
  --l2b-muted:         #b9c9d8;

  --l2b-radius: 12px;

  /* ── Flat fallbacks for the exercise screen's primary buttons (Start / ▶ /
     Practice again). On the dojo skin these rode a cream button sprite; here they
     become a solid white pill with blue text, driven by tokens the component now
     reads with `var(--token, …)` fallbacks. ── */
  --l2b-btn-bg: #ffffff;
  --l2b-btn-fg: var(--sg-blue);
}

/* The body fill follows the token (index.html sets `background: var(--l2b-bg)`),
   but pin it explicitly too so there is never a flash of the scaffold dark before
   the token cascade resolves. No backdrop, no attachment tricks — solid colour. */
html, body { background: var(--sg-blue); }