/* Hubshape design tokens for this deck, mirroring the app (hubshape src/app/globals.css, src/lib/palette.ts and the
   identity.config.ts brand block): asphalt and paper, ink for text, marking yellow for the one thing to look at
   (never text on light), gold and mustard for accents on light. Funnel Display for titles, Red Hat Text for the rest. */
:root {
  /* Core palette */
  --h-ink: #141416; --h-ink-2: #45444a; --h-asphalt: #1b1b1d; --h-asphalt-2: #26262a; --h-night: #111113;
  --h-marking: #ffcf1a; --h-gold: #d49e00; --h-mustard: #7a5b00; --h-cream: #fff4c2; --h-cream-2: #fbeaa6;
  --h-paper: #f7f6f1; --h-card: #ffffff; --h-bar: #f2f1ec; --h-line: #e4e2da; --h-line-2: #c9c7be; --h-muted: #6e6d74; --h-faint: #9c9aa2;
  --h-green: #2f7d4f; --h-green-bg: #e3efe7; --h-amber: #8a5a00; --h-red: #b3261e; --h-red-bg: #f6e1df;
  /* The lit colour: one thing on a screen that needs attention */
  --h-lit: var(--h-marking);

  /* Faces */
  --h-f-display: 'Funnel Display', 'Red Hat Text', system-ui, sans-serif;
  --h-f-ui: 'Red Hat Text', system-ui, sans-serif;
  --h-f-mono: 'Red Hat Mono', ui-monospace, Consolas, monospace;

  /* Spacing: an 8px base */
  --h-s1: 8px; --h-s2: 16px; --h-s3: 24px; --h-s4: 32px; --h-s5: 48px; --h-s6: 64px; --h-s7: 96px;
  /* Shape */
  --h-r-sm: 6px; --h-r-control: 8px; --h-r-card: 12px; --h-r-panel: 18px;
  --h-shadow-card: 0 1px 0 rgba(20,20,22,.04), 0 8px 24px -16px rgba(20,20,22,.22);
  --h-shadow-pop: 0 1px 2px rgba(20,20,22,.06), 0 24px 48px -18px rgba(20,20,22,.35);

  /* Slide scale (1920 x 1080 stage). Margins and the header zone are fixed on every slide. */
  --sl-x: 120px; --sl-head: 236px; --sl-foot: 96px; --sl-gap: 32px;
  --sl-kicker: 18px; --sl-title: 60px; --sl-lead: 26px;
  --sl-h3: 30px; --sl-body: 22px; --sl-small: 18px; --sl-label: 15px; --sl-figure: 64px;
}
