/*
 * Shared PIE docs page canvas — hub + Scalar spec pages (Scalar mirrors in scalar-brand.css).
 */
/*
 * Shared canvas tokens — scalar-brand.css references these so Scalar panels match
 * the same gradient as html/body (avoids “flat slab” mismatch).
 */
:root {
  --pie-bg0: #141516;
  --pie-bg1: #1c1d1f;
  --pie-bg0-light: #f7f6f4;
  --pie-bg1-light: #efece8;
  /* Full stack (same as body) — Scalar’s layout layers must stay transparent so this shows through */
  --pie-bg-stack:
    radial-gradient(ellipse 100% 70% at 50% -25%, rgba(255, 115, 0, 0.1), transparent 50%),
    radial-gradient(ellipse 55% 40% at 100% 0%, rgba(252, 149, 0, 0.06), transparent 42%),
    linear-gradient(180deg, var(--pie-bg0) 0%, var(--pie-bg1) 100%);
  --pie-bg-stack-light:
    radial-gradient(ellipse 100% 70% at 50% -25%, rgba(255, 115, 0, 0.09), transparent 50%),
    radial-gradient(ellipse 55% 40% at 100% 0%, rgba(252, 149, 0, 0.05), transparent 42%),
    linear-gradient(180deg, var(--pie-bg0-light) 0%, var(--pie-bg1-light) 100%);
  /* Elevated surfaces: hue-aligned to --pie-bg1, tuned to read over the gradient */
  --pie-surface-2: rgba(28, 29, 31, 0.72);
  --pie-surface-3: rgba(35, 37, 39, 0.8);
  --pie-surface-2-light: rgba(255, 255, 255, 0.86);
  --pie-surface-3-light: rgba(247, 244, 240, 0.94);
}

html.pie-docs-canvas {
  background-color: var(--pie-bg0);
}

body.pie-docs-canvas {
  background-color: var(--pie-bg0);
  background-image: var(--pie-bg-stack);
}

/* Scalar theme toggle: match page chrome to light UI */
html.pie-docs-canvas:has(body.light-mode) {
  background-color: var(--pie-bg0-light);
  color-scheme: light;
}

body.pie-docs-canvas.light-mode {
  background-color: var(--pie-bg0-light);
  background-image: var(--pie-bg-stack-light);
}

/* Scalar-only spec pages: full-height #scalar-root; “home” link is injected into the Scalar sidebar. */
html.pie-docs-canvas:has(#scalar-root) {
  margin: 0;
}

body.pie-docs-canvas:has(#scalar-root) {
  margin: 0;
  min-height: 100dvh;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

body.pie-docs-canvas:has(#scalar-root) #scalar-root {
  min-height: 100dvh;
  width: 100%;
}