/* kdbl brand palette — mirrors the UI design tokens.
   primary  = slate-900  #0f172a  (hsl 222.2 47.4% 11.2%)
   ink      = slate-50   #f8fafc  (hsl 210 40% 98%)
   accent   = sky-500    #0ea5e9  (interactive accent for links/hover)        */

:root {
  --md-primary-fg-color:        #0f172a;
  --md-primary-fg-color--light: #1e293b;
  --md-primary-fg-color--dark:  #020617;
  --md-primary-bg-color:        #f8fafc;
  --md-primary-bg-color--light: #f8fafc;
  --md-accent-fg-color:         #0ea5e9;
}

/* Dark scheme: keep the slate surface + slate-50 ink, sky accent. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:        #0f172a;
  --md-default-fg-color:        #f8fafc;
  --md-primary-fg-color:        #0f172a;
  --md-typeset-a-color:         #38bdf8;
  --md-accent-fg-color:         #0ea5e9;
}

/* Tighten the wordmark next to the monogram, matching the UI AppShell. */
.md-header__title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Responsive media embeds (YouTube / Vimeo iframes) — wrap in
   <div class="video-embed"> in Markdown. See index.md for the pattern. */
.video-embed {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  border-radius: 0.5rem;
  margin: 1rem 0;
}
.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}