/* ─────────────────────────────
   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 temporary
   framework workarounds 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);
}


/* -- Framework workaround: status pastels in dark mode --
   design-system.css ≤1.5 redefines the four --status-* colours for
   dark mode but not their --status-*-bg pastels, so typed callouts
   keep their light backgrounds behind near-white text (unreadable).
   Dim tints via the framework's own alpha scale until the package
   ships dark status backgrounds; remove then. The two blocks below
   are the same verbatim-mirror pair as the framework's §2b/§2c —
   if you touch one, touch both. */
[data-theme="dark"] {
  --status-info-bg: color-mix(in srgb, var(--blue), var(--alpha-15));
  --status-success-bg: color-mix(in srgb, var(--green), var(--alpha-15));
  --status-warning-bg: color-mix(in srgb, var(--yellow), var(--alpha-15));
  --status-danger-bg: color-mix(in srgb, var(--red), var(--alpha-15));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --status-info-bg: color-mix(in srgb, var(--blue), var(--alpha-15));
    --status-success-bg: color-mix(in srgb, var(--green), var(--alpha-15));
    --status-warning-bg: color-mix(in srgb, var(--yellow), var(--alpha-15));
    --status-danger-bg: color-mix(in srgb, var(--red), var(--alpha-15));
  }
}