/* ═══════════════════════════════════════════════════════════════════════
   THEME — Simon Creates
   Bridge between globals.css (brand source of truth) and slide layouts.

   Only defines what CHANGES for slides:
   - Font sizes (fixed px for 1920×1080 canvas — can't use clamp)
   - Slide padding (canvas-specific)
   - Brand texture + Reveal chrome

   Colors, weights, line heights, letter spacing, spacing, borders,
   transitions — layouts use globals.css names directly. No aliases.

   Naming: --rjs-* mirrors globals.css names with a Reveal.js prefix.
   Same scale, same logic — just fixed px instead of clamp().

   To rebrand: swap the globals.css import. Everything cascades.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Global Design System — Single Source of Truth ────────────────── */
@import url('globals.css');

/* ─── Font Loading (local copies for portability) ──────────────────── */
@font-face {
  font-family: 'BN Dopeneck';
  src: url('../fonts/BNDopeneck.woff2') format('woff2'),
       url('../fonts/BNDopeneck.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


:root {

  /* ─── Font Sizes (fixed px for 1920×1080 canvas) ───────────────────
     Same scale names as globals.css, prefixed --rjs-.
     Reveal.js scales a fixed canvas via CSS transform.
     clamp() and vw/vh don't work here — fixed px is correct.

     globals.css           → rjs override
     --text-xs   (12px)    → --rjs-text-xs    12px
     --text-sm   (14px)    → --rjs-text-sm    14px
     --text-base (16px)    → --rjs-text-base  18px
     --text-md   (18px)    → --rjs-text-md    21px
     --text-lg   (20px)    → --rjs-text-lg    26px
     --text-xl   (24-40px) → --rjs-text-xl    34px
     --text-2xl  (40-78px) → --rjs-text-2xl   48px
     --text-3xl  (48-100px)→ --rjs-text-3xl   52px
     --text-4xl  (56-128px)→ --rjs-text-4xl   74px
     --text-5xl  (72-172px)→ --rjs-text-5xl   148px
     --text-6xl  (96-208px)→ --rjs-text-6xl   250px
     (no equivalent)       → --rjs-text-stat  212px
  ──────────────────────────────────────────────────────────────────── */
  --rjs-text-xs:    12px;
  --rjs-text-sm:    14px;
  --rjs-text-base:  18px;
  --rjs-text-md:    21px;
  --rjs-text-lg:    26px;
  --rjs-text-xl:    34px;
  --rjs-text-2xl:   48px;
  --rjs-text-3xl:   52px;
  --rjs-text-4xl:   74px;
  --rjs-text-5xl:   148px;
  --rjs-text-6xl:   250px;
  --rjs-text-stat:  212px;


  /* ─── Slide Padding (canvas-specific) ──────────────────────────── */
  --rjs-pad-y: 75px;
  --rjs-pad-x: 75px;

  /* ─── Overlay Colors (slide-specific) ─────────────────────────── */
  --color-overlay-subtle: rgba(255, 255, 255, 0.06);
  --color-overlay-faint:  rgba(255, 255, 255, 0.04);
}


/* ─── Slide Background ────────────────────────────────────────────── */
/* Do NOT set transition on sections — Reveal.js manages slide
   transitions internally via data-transition attributes. */

.reveal .slides section {
  background: transparent;
  outline: none;
  border: none;
  box-shadow: none;
}

.reveal .slides {
  outline: none;
  border: none;
  box-shadow: none;
}


/* ─── Reveal.js Chrome ─────────────────────────────────────────────── */

.reveal .progress {
  color: var(--color-primary);
  height: var(--border-thin);
}

.reveal .controls {
  color: var(--color-primary);
}