/* Shared entry-page palette. Scoped so embedded studios keep their own theme.
   Visual contract: docs/design/studio-design.md. */
.studio-portal {
  color-scheme: dark;
  --studio-canvas: #000;
  --studio-panel: #0a0a0a;
  --studio-input: #111;
  --studio-raised: #141414;
  --studio-active: #1c1c1c;
  --studio-line: #222;
  --studio-line-strong: #3a3a3a;
  --studio-text: #e6e6e6;
  --studio-secondary: #a0a0a0;
  --studio-muted: #808080;
  --studio-selected: #f2f2f2;
  /* Older entry pages use these shorter role names. */
  --bg: var(--studio-canvas);
  --panel: var(--studio-panel);
  --panel2: var(--studio-raised);
  --raised: var(--studio-raised);
  --line: var(--studio-line);
  --line2: var(--studio-line-strong);
  --ink: var(--studio-text);
  --text: var(--studio-text);
  --muted: var(--studio-secondary);
  /* Existing modal, feedback, and pagination components use these roles. */
  --bg-void: var(--studio-canvas);
  --bg-app: var(--studio-canvas);
  --bg-surface: var(--studio-panel);
  --bg-elevated: var(--studio-raised);
  --bg-hover: var(--studio-active);
  --border-faint: var(--studio-line);
  --border-subtle: var(--studio-line);
  --border-default: var(--studio-line-strong);
  --text-primary: var(--studio-text);
  --text-secondary: var(--studio-secondary);
  --text-tertiary: var(--studio-muted);
  --text-ghost: var(--studio-muted);
  --accent: var(--studio-selected);
  --accent-glow: rgba(255,255,255,.06);
  --font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  margin: 0;
  min-height: 100dvh;
  height: auto;
  overflow: auto;
  background: var(--studio-canvas);
  color: var(--studio-text);
  font: 14px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
.studio-portal *, .studio-portal *::before, .studio-portal *::after { box-sizing: border-box; }
.studio-portal :focus-visible { outline: 2px solid var(--studio-text); outline-offset: 4px; }
.portal-eyebrow { margin: 0 0 8px; font: 500 11px/1.4 var(--font-mono); color: var(--studio-muted); }
/* Only entry pages opt the shared navigation into the neutral palette. */
.studio-portal .bnav { background: var(--studio-panel); border-color: var(--studio-line); height: 48px; }
.studio-portal .bnav__brand { color: var(--studio-text); font-size: 14px; }
.studio-portal .bnav__rule { background: var(--studio-line); }
.studio-portal .bnav__tab { color: var(--studio-secondary); font-size: 12px; border-radius: 6px; }
.studio-portal .bnav__tab:hover { color: var(--studio-text); background: var(--studio-raised); }
.studio-portal .bnav__tab.is-active { color: var(--studio-text); background: var(--studio-active); border-color: var(--studio-line-strong); }
.studio-portal .bnav__tab .v, .studio-portal .bnav__tab.is-active .v { color: var(--studio-muted); }
@media (pointer: coarse), (max-width: 600px) {
  .studio-portal .bnav { min-height: 56px; height: auto; }
  .studio-portal .bnav__tab { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-portal *, .studio-portal *::before, .studio-portal *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
}