/* dark: a pitch deck. Near-black, big tight type, one bright accent.
   The style of examples/07-pitch. */
@import "base.css";

jetty-deck {
  /* Syntax colours that read on a dark card. */
  --code-keyword: #f92672;
  --code-string: #e6db74;
  --code-comment: #8f8a75;
  --code-number: #ae81ff;
  --code-title: #a6e22e;
  --code-attr: #a6e22e;
  --code-tag: #f92672;
  --code-meta: #fd971f;
  --bg: var(--brand-background, var(--theme-background, #0b1220));
  --ink: var(--brand-text, var(--theme-text, #eef2ff));
  --muted: var(--brand-muted, var(--theme-muted, #94a3b8));
  --accent: var(--brand-accent, var(--theme-accent, #7c9cff));
  --line: var(--brand-line, var(--theme-line, #1e293b));
  --card: var(--brand-surface, var(--theme-surface, #111a2e));
  --font: var(--brand-font, var(--theme-font, "Inter", "Segoe UI", system-ui, sans-serif));
  --slide-pad-x: 11vw;
}

.slide h1 { font-size: calc(5.5vw * var(--theme-heading-scale, 1)); letter-spacing: -.03em; }
.slide h2 { font-size: calc(3.4vw * var(--theme-heading-scale, 1)); letter-spacing: -.02em; }
.slide p { font-size: 1.9vw; max-width: 62vw; }
.slide .sub { font-size: 1.5vw; }

.slide .columns > div { border-left: 3px solid var(--accent); padding-left: 1.4vw; }
.slide .columns h3 { font-size: calc(1.7vw * var(--theme-heading-scale, 1)); }
.slide .columns p { font-size: 1.2vw; color: var(--muted); }

.slide.cover { text-align: center; align-items: center; }
.slide.cover p { margin: 3vh auto 0; }

/* Quiz right/wrong, light enough to read on a dark slide. */
.slide juel-quiz { --quiz-right: #4ade80; --quiz-wrong: #f87171; }