/* =============================================================================
   THEME — brand knobs for the AUDIENCE LAYER (index.html + presenter.html).

   Change the accent + fonts here and BOTH the phone companion and the presenter
   live view re-skin together. Defaults are deliberately neutral.

   The DECK (deck.html) is INDEPENDENT — it's just slides. Replace it with your
   own deck in any theme (e.g. one built with the frontend-slides skill); the
   companion + presenter don't share or depend on the deck's look at all.

   index.html/presenter.html are kept verbatim (engine files) — their <link>
   tags preload Fraunces/Inter/IBM Plex Mono. To swap fonts without touching
   those HTML files, the brand fonts are @import'ed right here instead.
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Geist:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* ---- accent (primary · selected chips · bars) ---- */
  --accent:       #1528C4;   /* the one colour most decks change */
  --accent-dark:  #0F1E94;
  --accent-tint:  #E1E5FB;
  --accent-faint: #F1F2FC;
  --accent-soft:  #6A78E0;   /* lighter accent for dark surfaces (presenter) */

  /* ---- "good"/positive (quiz verdicts, Q&A, sync-ok) ---- */
  --good:         #0A994A;
  --good-tint:    #E6F4EC;
  --good-soft:    #4CC98A;

  /* ---- neutrals ---- */
  --ink-strong:   #0A0A0A;   /* headings + the presenter's dark surface base */
  --paper:        #FAF8F2;   /* light background AND light text on dark */

  /* presenter dark surface (change for a different dark) */
  --navy-deep:    #0A0A0A;
  --navy-card:    #1C1C1C;

  /* ---- type ---- */
  --serif: "Bricolage Grotesque", Georgia, serif;
  --sans:  "Geist", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:  "Space Mono", ui-monospace, monospace;
}

/* =============================================================================
   EXIT-RAMP BADGE — the small always-there link back to the author's site.
   All three pages render it ONLY when config.js defines `exitRamp.badge`;
   remove that config block and no badge appears anywhere. The look lives here
   once so deck/companion/presenter stay in step; each page positions it where
   its own chrome has room (deck: top-right; companion: bottom-left; presenter:
   inline in the footer via the --inline variant).
   ============================================================================= */
.exit-badge{
  position:fixed; top:14px; right:16px; z-index:1001;
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  color:var(--paper); background:var(--ink-strong);
  border:1.5px solid rgba(250,248,242,.4);
  padding:6px 11px; opacity:.66; transition:opacity .2s ease;
}
.exit-badge:hover, .exit-badge:focus-visible{ opacity:1; }
.exit-badge--inline{
  position:static; display:inline; background:none; border:0; padding:0;
  font:inherit; letter-spacing:inherit; text-transform:none; color:inherit;
  opacity:.85; text-decoration:underline; text-underline-offset:2px;
}