:root {
  /* ── Base palette ────────────────────────────────────────────── */
  --blue-500: #19b7f1;   /* primary cyan — section labels, filled skill bars, accents */
  --blue-200: #7edfff;   /* light cyan — footer track */
  --pink-300: #f9a8d4;   /* pink — footer accent stub */
  --pink-400: #ff69bb;   /* hot pink — occasional accent */
  --amber-400: #ffb042;  /* amber — timeline milestone node */

  --white: #ffffff;
  --black: #000000;
  --ink:   #2b2b2b;      /* soft charcoal — used instead of pure black for warmth */

  --gray-50:  #fafbfc;   /* lightest surface */
  --gray-100: #f4f5f7;   /* slide background (brightened, was #e9e9e9) */
  --gray-300: #e3e4e8;   /* avatar / image placeholder */
  --gray-400: #cdcfd6;   /* hairlines, connector line */
  --gray-500: #9a9aa2;   /* empty skill bar, secondary text */
  --gray-600: #6b6b6b;   /* card body text */
  --gray-700: #3d3d3d;   /* strong label text */

  /* ── Semantic aliases ────────────────────────────────────────── */
  --accent: var(--blue-500);
  --accent-soft: var(--blue-200);
  --accent-pink: var(--pink-300);

  --surface-slide: var(--gray-100);   /* the 1920×1080 slide canvas */
  --surface-card: var(--white);       /* white pills / cards */
  --surface-placeholder: var(--gray-300);

  --text-strong: var(--ink);          /* titles, timeline copy — soft charcoal */
  --text-body: var(--gray-600);       /* text inside white pills */
  --text-body-soft: var(--gray-500);  /* secondary / caption text */
  --text-on-accent: var(--white);     /* text on cyan label */
  --text-muted: var(--gray-500);

  --bar-filled: var(--blue-500);      /* skill meter, filled */
  --bar-empty: var(--gray-400);       /* skill meter, empty (lighter, softer) */

  /* footer bar (doubles as a progress indicator) */
  --footer-track: var(--blue-200);    /* unfilled run */
  --footer-fill: var(--blue-500);     /* filled run (progress) */
  --footer-main: var(--blue-200);     /* legacy two-tone main */
  --footer-accent: var(--pink-300);   /* fixed right stub */
  --footer-height: 16px;
}