@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,600;0,6..12,700;1,6..12,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ============================================================================
   Theme — "Lamplight" (first used by Talk 02 · Vibe-Coding a Light-switch Mascot)
   Three lamps in a room: turquoise, warm yellow, magenta, as on the cover
   art. Rounded vinyl-toy type (Fredoka) over a quiet body face. Dark is a
   night room, light is the same room by day.

   Dark --bg is sampled from the night renders (rgb(12,16,19)); change it and
   the art's square edge shows. Light --bg is a warm grey, rgb(224,220,213),
   chosen over the day renders' own cool blue-grey; Talk 02 lays a pool of
   that blue-grey around the art (--art-pool in its talk.css) so the edge
   fades into the page. Light text tokens are at least 4.5:1 on --bg and both
   surfaces.

   Contract: sets the semantic tokens the framework reads (--bg --surface
   --surface-2 --accent --accent-soft --accent-2 --text --text-strong --muted
   --good --bad --line --grid --veil --font-*). --lamp-* are this theme's
   own names for the three lamp colours.
   ============================================================================ */

:root {
  --font-display: 'Fredoka', 'Nunito Sans', system-ui, sans-serif;
  --font-body: 'Nunito Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* dark (default) — a night room */
  --bg: rgb(12, 16, 19);
  --surface: #151b20;
  --surface-2: #1b232a;
  --accent: #5fe0d0;        /* turquoise lamp */
  --accent-soft: #93ece1;
  --accent-2: #f3cf6b;      /* warm yellow lamp */
  --muted: #9aa6b0;
  --text: #d8dee3;
  --text-strong: #f5f7f8;
  --good: #7fd19b;
  --bad: #f0877a;
  --line: rgba(95, 224, 208, 0.14);
  --grid: rgba(216, 222, 227, 0.035);
  --veil: linear-gradient(90deg, rgba(12,16,19,0.88) 0%, rgba(12,16,19,0.55) 46%, rgba(12,16,19,0) 100%);

  --lamp-turquoise: var(--accent);
  --lamp-yellow: var(--accent-2);
  --lamp-magenta: #f27ad6;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: rgb(224, 220, 213); --surface: #eceae6; --surface-2: #e6e3dd;
    --accent: #0a6b63; --accent-soft: #138a80; --accent-2: #805800;
    --muted: #46525e; --text: #1c242d; --text-strong: #0b1016;
    --good: #2d6c44; --bad: #a33a2c;
    --line: rgba(10, 107, 99, 0.18); --grid: rgba(28, 36, 45, 0.05);
    --veil: linear-gradient(90deg, rgba(224,220,213,0.9) 0%, rgba(224,220,213,0.6) 46%, rgba(224,220,213,0) 100%);
    --lamp-magenta: #a8287f;
  }
}
[data-theme="light"] {
  --bg: rgb(224, 220, 213); --surface: #eceae6; --surface-2: #e6e3dd;
  --accent: #0a6b63; --accent-soft: #138a80; --accent-2: #805800;
  --muted: #46525e; --text: #1c242d; --text-strong: #0b1016;
  --good: #2d6c44; --bad: #a33a2c;
  --line: rgba(10, 107, 99, 0.18); --grid: rgba(28, 36, 45, 0.05);
  --veil: linear-gradient(90deg, rgba(224,220,213,0.9) 0%, rgba(224,220,213,0.6) 46%, rgba(224,220,213,0) 100%);
  --lamp-magenta: #a8287f;
}

/* one motif: a faint pool of lamplight in the top-right corner of content
   slides (the cover carries its own art; .slide--plain opts out) */
.slide:not(.slide--cover):not(.slide--plain)::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60vmax 45vmax at 100% 0%,
    color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%);
}