:root {
  /* Type scale (slide-appropriate) */
  --type-display: 132px;
  --type-title: 72px;
  --type-section-num: 220px;
  --type-subtitle: 44px;
  --type-h2: 56px;
  --type-body: 32px;
  --type-small: 24px;
  --type-eyebrow: 24px;
  --type-mono-lg: 28px;
  --type-mono: 24px;
  --type-mono-sm: 24px;

  /* Spacing */
  --chrome-pad-x: 64px;
  /* Horizontal content gutter. Tracks the chrome-bar width so slide
     content lines up with the chrome rail (path / act counter / footer)
     instead of sitting indented from it. One knob for the whole deck. */
  --pad-x: var(--chrome-pad-x);
  --pad-top: 110px;
  --pad-bottom: 100px;
  --gap-title: 56px;
  --gap-item: 32px;

  /* Colors — DevTalks navy base */
  --bg: #0A1554;
  --bg-elev: #0F1C66;
  --bg-card: #142578;
  --line: rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.20);
  /* Amplifier-specific (Act 3) */
  --amp-bad: var(--pink);
  --amp-good: var(--green);
  --fg: #FFFFFF;
  --fg-dim: #A5B0E6;
  --fg-mute: #6B78B8;

  /* Accents */
  --pink: #F02A5A;         /* devtalks primary */
  --purple: #7B3FBF;       /* devtalks portrait gradient */
  --cyan: #5BE9F0;
  --orange: #E16309;       /* personal brand */
  --orange-soft: #F08A3E;
  --accent: var(--pink);   /* primary (tweakable) */
  --accent-2: var(--orange);

  /* Effects */
  --grid: rgba(255,255,255,0.05);
  --grid-strong: rgba(240,42,90,0.12);
}