/* ─────────────────────────────
   BRAND THEME — BY DEFAULT
   ─────────────────────────────

   The framework (assets/css/design-system.css, synced from
   @bydefaultstudio/design-system) ships the studio system natively:
   palette, neutrals, semantic colours, status pastels, and components
   all arrive from the package. This file adds only what the framework
   deliberately leaves neutral (the brand fonts) plus one temporary
   docs-kit layout workaround at the bottom.

   Do NOT restate colour semantics here. Declarations in :root share
   specificity with the framework's [data-theme="dark"] block and this
   file loads later, so a :root colour override silently wins in dark
   mode too — that exact bug shipped in the previous version of this
   file and broke dark mode on the Idea Studio.

   Load AFTER design-system.css:
     <link rel="stylesheet" href="assets/css/design-system.css">
     <link rel="stylesheet" href="assets/css/theme.css">
   ───────────────────────────── */


/* -- Brand fonts --
   Zalando Sans and IBM Plex Mono load from Google Fonts. ES Face
   (editorial serif), kaneda-gothic (display), and Bugrino (playful)
   are licensed faces: they apply when installed or loaded elsewhere
   and otherwise fall back through the stacks below. */
@import url("https://fonts.googleapis.com/css2?family=Zalando+Sans:ital,wght@0,300..900;1,300..900&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  --font-primary: "Zalando Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-secondary: "ES Face", "Zalando Sans", Georgia, serif;
  --font-tertiary: "Bugrino", "Zalando Sans", system-ui, sans-serif;
  --font-quaternary: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: "kaneda-gothic", "Zalando Sans", system-ui, sans-serif;
  --font-playful: "Bugrino", "Zalando Sans", system-ui, sans-serif;
}


/* -- Docs-kit workaround: mobile grid blowout --
   docs-kit ≤1.5 sizes the main grid column and the prev/next footer
   with bare 1fr tracks, so a long page-nav title's min-content pushes
   .docs-main-area wider than a phone screen and the page header +
   page nav paint off-canvas — unreachable, because the page can't
   scroll sideways. Loaded on docs pages via brandCssPath; the
   selectors don't exist on hand-authored pages, where these rules are
   inert. Remove once @bydefaultstudio/design-system ships
   minmax(0, 1fr) tracks in docs.css. */
.docs-main-area {
  min-width: 0;
}

.page-nav-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}