:root{
  /* Color tokens */
  --bb-bg:#ffffff;--bb-fg:#0f172a;--bb-muted:#475569;--bb-border:#e2e8f0;
  --bb-surface:#f8fafc;--bb-surface-alt:#eef2ff;
  --bb-primary:#2563eb;--bb-primary-fg:#ffffff;--bb-accent:#0ea5e9;--bb-success:#16a34a;--bb-warning:#f59e0b;--bb-danger:#dc2626;
  /* Type scale */
  --bb-fs-xs:.75rem;--bb-fs-sm:.875rem;--bb-fs-base:1rem;--bb-fs-lg:1.125rem;--bb-fs-xl:1.25rem;--bb-fs-2xl:1.5rem;--bb-fs-3xl:1.875rem;--bb-lh:1.5;
  --bb-radius:16px;--bb-radius-sm:10px;--bb-shadow:0 6px 20px rgba(15,23,42,.06);
  /* Spacing */
  --bb-s-1:4px;--bb-s-2:8px;--bb-s-3:12px;--bb-s-4:16px;--bb-s-6:24px;--bb-s-8:32px;--bb-s-10:40px;--bb-s-12:48px;
  /* Layout */
  --bb-container:1200px;--bb-container-pad:16px;
  /* Animation */
  --bb-transition:all .2s ease;
}

body{font-size:var(--bb-fs-base);line-height:var(--bb-lh);background:var(--bb-bg);color:var(--bb-fg);}

.bb-container{max-width:var(--bb-container);padding-inline:var(--bb-container-pad);margin-inline:auto;width:100%;}
.bb-container.is-wide{max-width:1400px}
.bb-muted{color:var(--bb-muted)}
.bb-surface{background:var(--bb-surface)}
.bb-shadow{box-shadow:var(--bb-shadow)}