/* =========================================================================
 * AffluentOS — Slide template framework
 *
 * Every slide template renders inside a fixed 1920×1080 frame and consumes
 * the same shared `.slide` chrome. Two orthogonal modes:
 *
 *   ✱  Theme   — set on the slide root: data-aos-theme="dark" (default) or
 *                data-aos-theme="light". Driven by the design-system tokens.
 *
 *   ✱  Density — set on the slide root: data-density="live" (Kawasaki —
 *                minimal text, large type, 1 idea) or data-density="doc"
 *                (more text, reads itself). Default: live.
 *
 * Templates use the shared utilities below for vertical rhythm, the eyebrow
 * pattern, the 2-px chartreuse divider rule, and density-driven scale.
 * Density just scales body copy; headings stay the same so layout is stable.
 * =========================================================================*/

/* --------- Slide chrome -------------------------------------------- */

.slide {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: var(--surface-base);
  color: var(--ink-secondary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Padding presets — use these as container padding for consistent margins.
   The 6vw / 8vh in the older templates is replaced by these fixed values.
   1920 × 0.06 = 115.2 → 116. 1080 × 0.08 = 86.4 → 88. */
.slide-pad         { padding: 88px 116px; }
.slide-pad-tight   { padding: 64px 96px; }
.slide-pad-loose   { padding: 110px 152px; }
.slide-pad-center  { padding: 88px 116px; display: flex; align-items: center; justify-content: center; }

/* --------- Eyebrow + divider rule (the canonical title group) ----- */

.slide-eyebrow {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0;
}

.slide-divider {
  height: 2px;
  background: var(--accent-fill);
  border: 0;
  margin: 0;
}

/* --------- Title sizes specifically for slide-grade rendering ----- */

.slide-title-display {                  /* 144px — single-word hero (slide 01) */
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 144px;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--ink-primary);
  margin: 0;
  text-wrap: balance;
}
.slide-title-h1 {                       /* 96px — section heading */
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 96px;
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  color: var(--ink-primary);
  margin: 0;
  text-wrap: balance;
}
.slide-title-h2 {                       /* 72px — page title */
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 72px;
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  color: var(--ink-primary);
  margin: 0;
  text-wrap: balance;
}
.slide-title-h3 {                       /* 56px — sub-heading */
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  color: var(--ink-primary);
  margin: 0;
}

/* --------- Body text — density-aware --------------------------- */

/* Default (live) body — bigger, less dense */
.slide-body {
  font-family: var(--font-sans);
  font-size: 36px;
  font-weight: var(--fw-regular);
  line-height: 1.4;
  color: var(--ink-secondary);
  margin: 0;
}
.slide-body-sm {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 1.4;
  color: var(--ink-secondary);
  margin: 0;
}
.slide-body-xs {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink-muted);
  margin: 0;
}

/* Density: doc mode steps body down so more text fits comfortably. */
[data-density="doc"] .slide-body    { font-size: 28px; line-height: 1.55; }
[data-density="doc"] .slide-body-sm { font-size: 22px; line-height: 1.55; }
[data-density="doc"] .slide-body-xs { font-size: 18px; line-height: 1.55; }

/* --------- Mono numerics (big stats, KPIs) ---------------------- */

.slide-num-display {                   /* 256px — single hero stat */
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: 256px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-text);
}
.slide-num-h1 {                        /* 144px — big stat in a section */
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: 144px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-text);
}
.slide-num-h2 {                        /* 96px — stat in a stat tile */
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: 96px;
  line-height: 1;
  color: var(--accent-text);
}
.slide-num-h3 {                        /* 56px — inline stat */
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: 56px;
  line-height: 1;
  color: var(--accent-text);
}

/* --------- Pill (centered eyebrow with a fill) ------------------ */

.slide-pill {
  display: inline-flex;
  align-items: center;
  padding: 14px 36px;
  border-radius: 999px;
  background: var(--accent-fill);
  color: var(--ink-on-accent);
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0 32px rgba(199, 247, 81, 0.30);
}

/* --------- Card chrome used on doc-mode slides ------------------ */

.slide-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 36px;
}
.slide-card-accent {
  background: var(--accent-muted);
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  padding: 36px;
}

/* --------- Footer (deck name + page number + url) -------------- */

.slide-footer {
  position: absolute;
  bottom: 36px;
  left: 116px;
  right: 116px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

/* --------- Stage / scaler / nav (used by index.html) ------------ */

.slide-stage {
  position: fixed; inset: 0; background: #000; overflow: hidden;
}
.slide-scaler {
  position: absolute; top: 0; left: 0;
  width: 1920px; height: 1080px;
  transform-origin: 0 0;
}