/* Self-hosted Roboto — parity with the marketing site, which deliberately
   avoids Google Fonts. Files copied from packages/marketing/public/fonts. */
@font-face {
  font-family: Roboto;
  src: url("../assets/fonts/Roboto-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Roboto;
  src: url("../assets/fonts/Roboto-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Roboto;
  src: url("../assets/fonts/Roboto-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --md-text-font: "Roboto";
  /* Brand palette (packages/marketing/tailwind.config.js):
     light #8A81C9, default #514B7D, dark #353152 */
  --md-primary-fg-color: #514b7d;
  --md-primary-fg-color--light: #8a81c9;
  --md-primary-fg-color--dark: #353152;
  --md-accent-fg-color: #514b7d;
}

/* Screenshots: soft border + rounded corners so ultra-wide app captures sit
   comfortably on the page; glightbox provides click-to-zoom. */
.md-typeset img.screenshot {
  border: 1px solid #e2e0ee;
  border-radius: 0.4rem;
  box-shadow: 0 1px 3px rgba(53, 49, 82, 0.12);
}

/* Inline SVG diagrams scale to the column. */
.md-typeset .guide-diagram svg {
  max-width: 100%;
  height: auto;
}