/* ============================================================================
   THEME CONTRACT  —  the only file you edit to re-brand a deck.

   Three layers:
     1. FOUNDATIONS  — raw brand inputs (fonts + palette). EDIT THESE.
     2. SEMANTIC     — intent tokens the components actually read. Rarely touch.
     3. SCALE        — type / space / radii, tuned for the fixed 1920×1080 canvas.

   To re-brand: change ONLY the FOUNDATIONS block (and bundle the fonts).
   Everything downstream adapts. Components never hardcode a hex or a font.

   Default look = neutral "warm editorial" using system fonts, so the deck
   renders beautifully BEFORE you bundle any custom fonts. Swap fonts later.
   ============================================================================ */

/* --- Optional custom fonts -------------------------------------------------
   Drop woff2 files in ./fonts/ and uncomment. Until then the stacks below
   fall back to high-quality system fonts and the deck still looks polished.
   (Variable fonts: a single face with a weight RANGE, e.g. 300 700.)        */
@font-face { font-family:"Fraunces"; font-style:normal; font-weight:300 700; font-display:swap; src:url("fonts/fraunces-latin.woff2") format("woff2"); }
@font-face { font-family:"Fraunces"; font-style:italic; font-weight:300 700; font-display:swap; src:url("fonts/fraunces-italic-latin.woff2") format("woff2"); }
@font-face { font-family:"Albert Sans"; font-style:normal; font-weight:300 700; font-display:swap; src:url("fonts/albert-sans-latin.woff2") format("woff2"); }

:root {
  /* ====================== 1. FOUNDATIONS — EDIT THESE ===================== */

  /* Fuentes NOMAD: Fraunces (display editorial) + Albert Sans (funcional). */
  --font-serif: "Fraunces", "Times New Roman", Georgia, serif;
  --font-sans:  "Albert Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Palette. Pure white is NOT a canvas — use a warm/cool off-white. */
  --brand-paper:        #F5F1EA;  /* bone */
  --brand-paper-2:      #EEE8DE;
  --brand-ink:          #0E1E1A;
  --brand-muted:        #6B6357;
  --brand-accent:       #E8573C;  /* coral */
  --brand-accent-soft:  #F0A68F;
  --brand-second:       #0F4C3A;  /* verde */
  --brand-second-soft:  #F0A68F;
  --brand-white:        #FFFFFF;  /* form cards / device mockups ONLY       */

  /* Serif display weight. Normal serifs (Georgia) → 400.
     Light editorial variable serifs (Fraunces, Canela) look best at 300–360. */
  --w-display: 330;

  /* ====================== 2. SEMANTIC — components read these ============= */
  --serif: var(--font-serif);
  --sans:  var(--font-sans);

  --bg:          var(--brand-paper);
  --bg-alt:      var(--brand-paper-2);
  --bg-dark:     var(--brand-ink);
  --surface:     var(--brand-white);

  --fg:          var(--brand-ink);
  --fg-muted:    var(--brand-muted);
  --fg-inverse:  var(--brand-paper);
  --fg-accent:   var(--brand-accent);
  --fg-accent-soft: var(--brand-accent-soft);
  --fg-second:   var(--brand-second);
  --fg-second-soft: var(--brand-second-soft);

  /* Hairlines derive from ink so they auto-adjust when you change the palette. */
  --hair:        color-mix(in srgb, var(--brand-ink) 12%, transparent);
  --hair-strong: color-mix(in srgb, var(--brand-ink) 22%, transparent);
  /* On-dark hairlines */
  --hair-inv:        color-mix(in srgb, var(--brand-paper) 16%, transparent);
  --hair-inv-strong: color-mix(in srgb, var(--brand-paper) 28%, transparent);

  /* ====================== 3. SCALE — px for 1920×1080 ==================== */
  /* Fixed px (not vw/clamp): the engine scales the whole canvas, so authored
     pixels map 1:1 to the design and never reflow. Bump a token if a headline
     wraps; don't fight it with per-slide overrides. */
  --type-display:  104px;   /* cover / big statement h1            */
  --type-title:     72px;   /* section + content headline h2       */
  --type-subtitle:  44px;   /* sub-head / lede                     */
  --type-body:      30px;   /* body copy, bullets                  */
  --type-meta:      22px;   /* footer, captions, labels            */
  --type-eyebrow:   18px;   /* kickers / eyebrows (uppercase)      */
  --type-stat:     180px;   /* hero numbers                        */

  /* Layout rhythm */
  --pad-x:         120px;   /* slide left/right padding            */
  --pad-top:        96px;
  --pad-bottom:     96px;
  --gap-title:      56px;   /* eyebrow→headline→content stack gap  */
  --gap-item:       28px;   /* between bullets / cards             */

  /* Radii — square-leaning reads more editorial; bump for friendlier brands */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 16px;

  /* Elevation — warm, long, never floaty */
  --elev-media: 0 30px 60px -28px color-mix(in srgb, var(--brand-ink) 30%, transparent);
  --elev-card:  0 18px 40px -24px color-mix(in srgb, var(--brand-ink) 22%, transparent);

  /* Motion */
  --ease-out: cubic-bezier(.22,.8,.22,1);
  --dur-fast: .2s;
  --dur-med:  .35s;
}

/* Page + stage background behind the letterboxed canvas. */
html, body { margin: 0; padding: 0; background: #0b0b0b; }
deck-stage { background: #0b0b0b; }