/* ============================================================
   Tonn Cable — brand design tokens
   ============================================================ */
:root {
  /* Brand */
  --magenta:        #A50064;
  --magenta-bright: #DB0085;
  --magenta-700:    #940757;
  --magenta-deep:   #6D0142;
  --pink-300:       #E484BD;
  --pink-200:       #FFDCF1;
  --pink-100:       #FFF2FA;
  --ink:            #191919;
  --ink-900:        #0D0D0F;
  --ink-850:        #141417;
  --ink-800:        #1C1C20;
  --white:          #FFFFFF;
  --grey-500:       #A6A6A6;
  --grey-300:       #D9D9D9;
  --amber:          #FF821E;
  --amber-2:        #FFB909;

  /* Type */
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Stage (16:9 design canvas) */
  --stage-w: 1280;
  --stage-h: 720;

  /* Motion */
  --ease: cubic-bezier(.22,.7,.2,1);
  --t-slide: .6s;
  --t-anim: .8s;

  /* Light theme (default) */
  --bg: var(--white);
  --bg-2: var(--pink-100);
  --fg: var(--ink);
  --muted: #6B6B72;
  --accent: var(--magenta);
  --card: #FFFFFF;
  --card-2: #FAFAFB;
  --card-border: #ECEAEE;
  --hairline: #E7E5EA;
}

/* Dark theme — applied per-slide */
.slide[data-theme="dark"] {
  --bg: var(--ink-900);
  --bg-2: var(--ink-850);
  --fg: var(--white);
  --muted: #A9A9B2;
  --accent: var(--magenta-bright);
  --card: rgba(255,255,255,.05);
  --card-2: rgba(255,255,255,.07);
  --card-border: rgba(255,255,255,.12);
  --hairline: rgba(255,255,255,.14);
}