/* Shared UI vocabulary. Stage and viewport containers are reserved for later phases. */
:root {
  --bc-bg: #f7f5fa;
  --bc-surface: #fff;
  --bc-text: #241d32;
  --bc-text-secondary: #71677f;
  --bc-primary: #33243f;
  --bc-primary-hover: #473255;
  --bc-selected-bg: #ece5f3;
  --bc-selected-text: #493453;
  --bc-border: #ded7e5;
  --bc-control-border: #908497;
  --bc-focus: #765494;
  --bc-success: #37634e;
  --bc-warning: #8a581c;
  --bc-error: #a43349;
  --bc-font-body: 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --bc-font-editorial: 'Songti SC', 'STSong', Georgia, serif;
  --bc-font-brand: Georgia, 'Times New Roman', serif;
  --bc-text-body: 1rem;
  --bc-text-small: .875rem;
  --bc-text-meta: .75rem;
  --bc-space-1: 4px;
  --bc-space-2: 8px;
  --bc-space-3: 12px;
  --bc-space-4: 16px;
  --bc-space-5: 20px;
  --bc-space-6: 24px;
  --bc-space-8: 32px;
  --bc-space-12: 48px;
  --bc-space-16: 64px;
  --bc-space-24: 96px;
  --bc-radius-control: 12px;
  --bc-radius-compact: 16px;
  --bc-radius-panel: 24px;
  --bc-radius-pill: 999px;
  --bc-shadow-panel: 0 12px 36px rgb(43 29 62 / 7%);
  --bc-shadow-header: 0 4px 24px rgb(43 29 62 / 4%);
  --bc-duration-fast: 140ms;
  --bc-duration-nav: 180ms;
  --bc-ease: cubic-bezier(.2, .7, .2, 1);
  --bc-width-content: 1200px;
  --bc-width-stage: 1600px;
  --bc-width-viewport: 100%;
  --bc-gutter: clamp(20px, 3vw, 40px);
  --bc-header-height: 88px;
  --bc-mobile-nav-height: 72px;
  --bc-safe-bottom: env(safe-area-inset-bottom, 0px);
  --bc-touch-target: 48px;
}

@media (max-width: 767px) {
  :root { --bc-gutter: 16px; --bc-header-height: 64px; }
}