mdeck 2.3.0

package/assets/extensions/themes/aurora/styles.css

@@ -0,0 +1,644 @@
+/* Aurora — northern lights.
+   Soft curtains of light in the palette's two accents and their blend move
+   across the slides: as a faint shimmer at the edge of content slides, and
+   at full strength on title, chapter and statement slides. Chapter and
+   statement slides are night skies, in the palette's other variant, so a
+   talk alternates between day and night. Surfaces are frosted glass with a
+   fine gradient edge; key words glow in the accent gradient. All colours
+   come from the palette's roles, so every palette works. */
+
+.slide {
+  --aurora-a: var(--accent);
+  --aurora-b: var(--accent-2);
+  --aurora-c: color-mix(in oklab, var(--accent) 50%, var(--accent-2));
+  --aurora-gradient: linear-gradient(120deg, var(--aurora-a) 0%, var(--aurora-c) 50%, var(--aurora-b) 100%);
+  --glass: color-mix(in oklab, var(--bg) 72%, transparent);
+  --glass-edge: linear-gradient(135deg, color-mix(in oklab, var(--aurora-a) 70%, transparent), color-mix(in oklab, var(--rule) 60%, transparent) 45%, color-mix(in oklab, var(--aurora-b) 70%, transparent));
+}
+
+/* The curtains: narrow, tall bands of light hanging from the top of the
+   sky and fading downwards, slanted like an aurora. Every slide has them;
+   how strong is set per slide type with --aurora-strength. */
+.slide::before {
+  content: '';
+  position: absolute;
+  inset: -12% -16% 0;
+  background:
+    radial-gradient(ellipse 4.5% 62% at 8% 6%, var(--aurora-a), transparent 100%),
+    radial-gradient(ellipse 7% 78% at 20% 0%, var(--aurora-c), transparent 100%),
+    radial-gradient(ellipse 3.5% 54% at 31% 10%, var(--aurora-a), transparent 100%),
+    radial-gradient(ellipse 8% 86% at 45% 0%, var(--aurora-b), transparent 100%),
+    radial-gradient(ellipse 4% 58% at 58% 8%, var(--aurora-c), transparent 100%),
+    radial-gradient(ellipse 6.5% 74% at 72% 2%, var(--aurora-a), transparent 100%),
+    radial-gradient(ellipse 5% 66% at 88% 4%, var(--aurora-b), transparent 100%),
+    radial-gradient(ellipse 60% 22% at 50% 0%, color-mix(in oklab, var(--aurora-c) 60%, transparent), transparent 80%);
+  /* Soft by their gradients alone, not a blur filter: that stays vector in a
+     PDF (a blurred layer prints as a huge image) and draws faster. */
+  transform: skewX(-18deg);
+  opacity: var(--aurora-strength, 0);
+  pointer-events: none;
+  z-index: 0;
+  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 var(--aurora-reach, 40%), transparent calc(var(--aurora-reach, 40%) + 40%));
+  mask-image: linear-gradient(to bottom, #000 0%, #000 var(--aurora-reach, 40%), transparent calc(var(--aurora-reach, 40%) + 40%));
+}
+/* Content stays above the light. */
+.slide > .slide-header, .slide > .slide-body, .slide > .slide-footer { position: relative; z-index: 1; }
+.slide > .slide-logo { z-index: 1; }
+
+/* The light drifts slowly while presenting; never in print or for people
+   who prefer less motion. */
+@media (prefers-reduced-motion: no-preference) {
+  .slide--title::before, .slide--chapter::before, .slide--focus::before { animation: aurora-drift 26s ease-in-out infinite alternate; }
+}
+@keyframes aurora-drift {
+  from { transform: skewX(-18deg) translateX(-2.5%); }
+  to { transform: skewX(-11deg) translateX(2.5%); }
+}
+deck-stage[data-deck-static] .slide::before { animation: none; }
+/* In a PDF the curtains print as images (Chrome rasterizes see-through
+   gradients, about 800 KB a slide), so only the slides that carry the look
+   keep them; a mask would print as an image too. */
+@media print {
+  .slide::before { animation: none; -webkit-mask-image: none; mask-image: none; }
+  .slide:not(.slide--title):not(.slide--chapter):not(.slide--focus)::before { display: none; }
+}
+
+/* Print and PDF: gradient text prints with a hairline box around it, and
+   glows print as dark halos; solid colours instead. */
+@media print {
+  em, .slide-footer > span:last-child:not(:first-child), .chapter-num, .slide-body ol li::before {
+    background: none !important;
+    -webkit-text-fill-color: currentColor !important;
+    color: var(--aurora-a) !important;
+    filter: none !important;
+  }
+  .slide-body ul li::before, .focus-eyebrow::before, .slide-header > span:last-child:not(:empty)::after { box-shadow: none !important; }
+  /* Frosted glass blurs what lies behind it, which prints as an image. */
+  .slide *, .slide *::before { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
+}
+
+/* Content slides: a shimmer along the upper edge only. */
+.slide { --aurora-strength: 0.2; --aurora-reach: 0%; }
+
+/* Night slides: the palette's other variant (dark on a light deck). */
+.slide--chapter, .slide--focus {
+  --bg: var(--inverse-bg);
+  --surface: var(--inverse-surface);
+  --ink: var(--inverse-ink);
+  --ink-soft: var(--inverse-ink-soft);
+  --muted: var(--inverse-muted);
+  --rule: var(--inverse-rule);
+  --accent: var(--inverse-accent);
+  --accent-2: var(--inverse-accent-2);
+  --on-accent: var(--inverse-on-accent);
+  background: var(--bg);
+  color: var(--ink);
+}
+
+/* ─────────────────────────────────────────────
+   HEADER / FOOTER
+   ───────────────────────────────────────────── */
+.slide-header {
+  font-weight: 600;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+  color: var(--ink-soft);
+}
+.slide-header .brand { color: var(--ink); }
+/* The section label as a small glass pill with a glowing dot. */
+.slide-header > span:last-child:not(:empty) {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 22px 8px 16px;
+  border-radius: 999px;
+  background: var(--glass-edge) border-box;
+  border: 1px solid transparent;
+  background-clip: border-box;
+  position: relative;
+  isolation: isolate;
+}
+.slide-header > span:last-child:not(:empty)::before {
+  content: '';
+  position: absolute;
+  inset: 1px;
+  border-radius: inherit;
+  background: var(--glass);
+  -webkit-backdrop-filter: blur(18px);
+  backdrop-filter: blur(18px);
+  z-index: -1;
+}
+.slide-header > span:last-child:not(:empty)::after {
+  content: '';
+  order: -1;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--aurora-gradient);
+  box-shadow: 0 0 12px var(--aurora-a);
+}
+
+.slide-logo {
+  position: absolute;
+  top: var(--pad-y);
+  right: var(--pad-x);
+  height: 96px;
+  width: auto;
+  max-width: 360px;
+  object-fit: contain;
+  filter: var(--logo-filter, none);
+  transform: translateY(calc(var(--fs-eyebrow) * 0.5 - 50%));
+}
+
+.slide-footer {
+  font-family: var(--font-body);
+  font-size: var(--fs-small);
+  font-weight: 400;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--muted);
+  padding-top: 24px;
+}
+.slide-footer > span:last-child:not(:first-child) {
+  font-weight: 800;
+  letter-spacing: 0;
+  background: var(--aurora-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* ─────────────────────────────────────────────
+   TYPOGRAPHY
+   ───────────────────────────────────────────── */
+.eyebrow {
+  font-family: var(--font-body);
+  font-size: var(--fs-eyebrow);
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin: 0 0 var(--gap-title) 0;
+}
+.display {
+  font-family: var(--font-display);
+  font-size: var(--fs-display);
+  font-weight: 800;
+  line-height: 0.98;
+  letter-spacing: -0.045em;
+  margin: 0;
+  color: var(--ink);
+  text-wrap: balance;
+}
+.title {
+  font-family: var(--font-display);
+  font-size: var(--fs-h);
+  font-weight: 800;
+  line-height: 1.04;
+  letter-spacing: -0.03em;
+  margin: 0;
+  color: var(--ink);
+  text-wrap: balance;
+}
+.subtitle {
+  font-family: var(--font-body);
+  font-size: var(--fs-sub);
+  font-weight: 400;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  color: var(--ink-soft);
+  margin: 0;
+  text-wrap: pretty;
+}
+.body-text {
+  font-family: var(--font-body);
+  font-size: var(--fs-body);
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--ink-soft);
+  margin: 0;
+  text-wrap: pretty;
+}
+.meta {
+  font-family: var(--font-body);
+  font-size: var(--fs-small);
+  color: var(--muted);
+}
+/* Key words glow in the accent gradient. */
+em {
+  font-style: normal;
+  background: var(--aurora-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+strong { color: var(--ink); font-weight: 700; }
+
+/* ─────────────────────────────────────────────
+   LAYOUT: TITLE — the full aurora over the sky
+   ───────────────────────────────────────────── */
+.slide--title { --aurora-strength: 0.5; --aurora-reach: 30%; }
+.slide--title .slide-body {
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+.slide--title .display {
+  font-size: var(--fs-display);
+  max-width: 1500px;
+}
+.slide--title .title-text { display: flex; flex-direction: column; align-items: center; }
+.slide--title .subtitle {
+  margin-top: 56px;
+  max-width: 1100px;
+}
+/* With an image: the image fills the right half, the title stands at the
+   lower left, below the brightest light, instead of being pushed up into it. */
+.slide--title.has-image .slide-body {
+  display: grid;
+  grid-template-columns: 1.1fr 1fr;
+  column-gap: 88px;
+  align-items: stretch;
+  text-align: left;
+  padding-bottom: 32px;
+}
+.slide--title.has-image .title-text {
+  align-items: flex-start;
+  justify-content: flex-end;
+  min-width: 0;
+}
+.slide--title.has-image .display { font-size: calc(var(--fs-display) * 0.62); }
+.slide--title.has-image .subtitle { margin-top: 40px; }
+.slide--title.has-image .title-image {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  object-fit: cover;
+  border-radius: 24px;
+}
+
+/* ─────────────────────────────────────────────
+   LAYOUT: CHAPTER — a night sky with bright curtains
+   ───────────────────────────────────────────── */
+.slide--chapter { --aurora-strength: 0.85; --aurora-reach: 35%; }
+.slide--chapter .slide-body {
+  justify-content: flex-end;
+  align-items: flex-start;
+  padding-bottom: 24px;
+}
+.chapter-num {
+  font-family: var(--font-display);
+  font-size: 340px;
+  font-weight: 800;
+  /* Gradient text is painted only inside the element's box: a line height
+     below the glyphs' height cut off the bottom of the digits. The full line
+     height, with the spacing taken back by the margins. */
+  line-height: 1.05;
+  padding-right: 0.04em;
+  letter-spacing: -0.06em;
+  background: var(--aurora-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  filter: drop-shadow(0 0 40px color-mix(in oklab, var(--aurora-c) 45%, transparent));
+  margin: -0.12em 0 -0.06em -12px;
+}
+.chapter-meta {
+  font-family: var(--font-body);
+  font-size: var(--fs-eyebrow);
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--ink-soft);
+  margin: 0 0 20px 0;
+}
+.slide--chapter .chapter-title {
+  font-family: var(--font-display);
+  font-size: var(--fs-title);
+  font-weight: 800;
+  line-height: 1.0;
+  letter-spacing: -0.04em;
+  margin: 0 0 40px 0;
+  color: var(--ink);
+  max-width: 1400px;
+  text-wrap: balance;
+}
+.slide--chapter .chapter-desc {
+  font-family: var(--font-body);
+  font-size: var(--fs-sub);
+  font-weight: 400;
+  line-height: 1.35;
+  color: var(--ink-soft);
+  max-width: 1100px;
+  margin: 0;
+}
+.slide--chapter.has-image .slide-body {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 80px;
+  align-items: stretch;
+}
+.slide--chapter.has-image .chapter-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+.slide--chapter.has-image .chapter-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 24px;
+}
+
+/* ─────────────────────────────────────────────
+   LAYOUT: FOCUS — a statement under the night sky
+   ───────────────────────────────────────────── */
+.slide--focus { --aurora-strength: 0.6; --aurora-reach: 20%; }
+.slide--focus .slide-body {
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+.focus-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 28px 10px 20px;
+  border-radius: 999px;
+  background: var(--glass);
+  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
+  border: 1px solid color-mix(in oklab, var(--rule) 70%, transparent);
+  font-family: var(--font-body);
+  font-size: var(--fs-eyebrow);
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--ink-soft);
+  margin: 0 0 56px 0;
+}
+.focus-eyebrow::before {
+  content: '';
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--aurora-gradient);
+  box-shadow: 0 0 12px var(--aurora-a);
+}
+.focus-statement,
+.slide--focus .focus-content h1,
+.slide--focus .focus-content p {
+  font-family: var(--font-display);
+  font-size: var(--fs-focus);
+  font-weight: 800;
+  line-height: 1.06;
+  letter-spacing: -0.04em;
+  color: var(--ink);
+  max-width: 1500px;
+  margin: 0;
+  text-wrap: balance;
+  text-align: center;
+}
+.focus-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+.focus-attribution {
+  font-family: var(--font-body);
+  font-size: var(--fs-small);
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin: 56px 0 0 0;
+}
+
+/* ─────────────────────────────────────────────
+   LAYOUT: IMAGE + TEXT
+   ───────────────────────────────────────────── */
+.image-pane {
+  flex: 1.15;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface);
+  overflow: hidden;
+  position: relative;
+  border-radius: 28px;
+  box-shadow: 0 24px 60px -24px color-mix(in oklab, var(--aurora-c) 45%, transparent);
+}
+.image-placeholder {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(135deg, var(--surface) 0 22px, var(--bg) 22px 44px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.image-placeholder span {
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 22px;
+  color: var(--muted);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  background: var(--bg);
+  padding: 14px 20px;
+  border: 1px solid var(--rule);
+  border-radius: 999px;
+}
+.text-pane .title { font-size: var(--fs-h); }
+.text-pane .body-text + .body-text { margin-top: 8px; }
+.text-pane .eyebrow { margin-bottom: 8px; }
+
+/* ─────────────────────────────────────────────
+   LISTS — glowing dots, gradient numbers
+   ───────────────────────────────────────────── */
+.slide-body ul li {
+  font-weight: 400;
+  line-height: 1.35;
+  padding-left: 46px;
+  position: relative;
+}
+.slide-body ul li::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.42em;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--aurora-gradient);
+  box-shadow: 0 0 14px color-mix(in oklab, var(--aurora-a) 55%, transparent);
+}
+.slide-body ol li {
+  padding-left: 60px;
+  position: relative;
+}
+.slide-body ol li::before {
+  content: counter(slide-ol);
+  position: absolute;
+  left: 0;
+  top: 0;
+  font-family: var(--font-display);
+  font-weight: 800;
+  line-height: 1.35;
+  background: var(--aurora-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* ─────────────────────────────────────────────
+   LAYOUT: FULL-BLEED IMAGE
+   ───────────────────────────────────────────── */
+.slide--full-bleed-image::before { display: none; }
+.slide--full-bleed-image.has-overlay .slide-bg::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.15));
+}
+.slide--full-bleed-image .overlay-title {
+  font-family: var(--font-display);
+  font-size: calc(var(--fs-h) * 1.26);
+  font-weight: 800;
+  line-height: 1.02;
+  letter-spacing: -0.04em;
+  color: #fff;
+  margin: 0;
+  max-width: 1300px;
+  text-wrap: balance;
+}
+
+/* ─────────────────────────────────────────────
+   CONTENT SLIDE
+   ───────────────────────────────────────────── */
+.slide-body h1 {
+  font-family: var(--font-display);
+  font-size: var(--fs-h);
+  font-weight: 800;
+  line-height: 1.04;
+  letter-spacing: -0.035em;
+  color: var(--ink);
+  margin: 0 0 var(--gap-title) 0;
+  max-width: 1500px;
+  text-wrap: balance;
+}
+.slide-body h2 {
+  font-family: var(--font-display);
+  font-size: var(--fs-sub);
+  font-weight: 700;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  color: var(--ink);
+  margin: 0 0 var(--gap-item) 0;
+}
+.slide-body p {
+  font-family: var(--font-body);
+  font-size: var(--fs-body);
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--ink-soft);
+  margin: 0 0 var(--gap-item) 0;
+  text-wrap: pretty;
+}
+
+/* ─────────────────────────────────────────────
+   GLASS — callouts and code as frosted panes with a gradient edge
+   ───────────────────────────────────────────── */
+.slide-body .callout {
+  position: relative;
+  isolation: isolate;
+  border: 1.5px solid transparent;
+  border-radius: 22px;
+  background: var(--glass-edge) border-box;
+  padding: 26px 34px 28px;
+  margin: 36px 0 0;
+  max-width: 1300px;
+  box-shadow: 0 18px 50px -24px color-mix(in oklab, var(--aurora-c) 50%, transparent);
+}
+.slide-body .callout::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 20px;
+  background: color-mix(in oklab, var(--bg) 88%, transparent);
+  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
+  z-index: -1;
+}
+.slide-body .callout-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-family: var(--font-body);
+  font-size: var(--fs-eyebrow);
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  margin: 0 0 10px 0;
+}
+.slide-body .callout-title::before {
+  content: '';
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: currentColor;
+  box-shadow: 0 0 10px currentColor;
+}
+.slide-body .callout p { padding-left: 0; color: var(--ink); font-size: var(--fs-body); }
+.slide-body .callout-tip .callout-title { color: var(--accent); }
+/* Signal colours mixed with the text colour, readable on the glass in light and dark */
+.slide-body .callout-note .callout-title { color: color-mix(in oklab, var(--callout-note) 65%, var(--ink)); }
+.slide-body .callout-important .callout-title { color: color-mix(in oklab, var(--callout-important) 65%, var(--ink)); }
+.slide-body .callout-warning .callout-title { color: color-mix(in oklab, var(--callout-warning) 45%, var(--ink)); }
+.slide-body .callout-caution .callout-title { color: color-mix(in oklab, var(--callout-caution) 65%, var(--ink)); }
+/* Lecture blocks: theorems glow in the accent, definitions in the second */
+.slide-body :is(.callout-theorem, .callout-lemma, .callout-corollary) .callout-title { color: var(--accent); }
+.slide-body .callout-definition .callout-title { color: var(--accent-2); }
+
+.code-block {
+  --code-bg: color-mix(in oklab, var(--surface) 92%, transparent);
+  --code-radius: 20px;
+  --code-size: 30px;
+  background: var(--code-bg);
+  border-radius: var(--code-radius);
+  padding: 40px 48px;
+  position: relative;
+  margin: 0;
+  overflow: hidden;
+  font-size: var(--code-size);
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  line-height: 1.6;
+  border: 1px solid color-mix(in oklab, var(--rule) 70%, transparent);
+  box-shadow: 0 18px 50px -24px color-mix(in oklab, var(--aurora-c) 45%, transparent);
+}
+.code-block code {
+  font-family: inherit;
+  font-size: inherit;
+  background: none;
+  padding: 0;
+}
+
+/* ─────────────────────────────────────────────
+   AUDIENCE QUESTIONS — bars of light, glass cards
+   ───────────────────────────────────────────── */
+.slide .poll-track, .slide .scale-track { border-radius: 999px; background: color-mix(in oklab, var(--rule) 55%, transparent); }
+.slide .poll-fill { border-radius: 999px; background: var(--aurora-gradient); box-shadow: 0 0 18px color-mix(in oklab, var(--aurora-a) 45%, transparent); }
+.slide .scale-fill { border-radius: 12px 12px 0 0; background: linear-gradient(to top, var(--aurora-a), var(--aurora-b)); }
+.slide .question-cards li { border-radius: 18px; border-left: 0; background: var(--glass); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--rule) 70%, transparent); }
+.slide .poll-join { border-radius: 24px; }
+
+/* ─────────────────────────────────────────────
+   MATH (KaTeX)
+   ───────────────────────────────────────────── */
+.slide .katex-display {
+  font-size: var(--fs-sub);
+  margin: 48px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}

package/assets/extensions/themes/duet/extension.toml

@@ -0,0 +1,46 @@
+schema = 1
+kind = "theme"
+id = "duet"
+title = "Duet"
+description = "Two voices: heavy slab headings, and two accents that take turns, as split fields, diagonal chapters and alternating markers."
+# The palette this theme uses unless the deck sets one; colours come only from palettes.
+palette = "cobalt"
+fonts = [
+  "https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500;700&family=DM+Sans:wght@400;500;700&display=swap",
+]
+
+[files]
+styles = "styles.css"
+
+# Type, spacing and fonts used by styles.css; colours come from the palette.
+# Deck settings (params) override these.
+[tokens]
+
+# Type scale (px) — projection-appropriate at 1920×1080
+"--fs-display" = "150px"
+"--fs-title" = "112px"
+"--fs-focus" = "88px"
+"--fs-h" = "68px"
+"--fs-sub" = "44px"
+"--fs-body" = "34px"
+"--fs-small" = "28px"
+"--fs-eyebrow" = "24px"
+
+# Spacing
+"--pad-x" = "140px"
+"--pad-y" = "72px"
+"--gap-title" = "52px"
+"--gap-item" = "28px"
+
+# Type families
+"--font-display" = "\"Zilla Slab\", Georgia, \"Times New Roman\", serif"
+"--font-body" = "\"DM Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
+
+# Settings authors can change under `params:` in the deck; each points at a token above.
+[params.fontDisplay]
+token = "--font-display"
+title = "Display font"
+
+[params.fontBody]
+token = "--font-body"
+title = "Body font"