/* B&B Lab brand tokens */

:root {
  --bb-ink: #15151A;
  --bb-paper: #FBF9F5;
  --bb-stone: #EBE7DF;
  --bb-graphite: #3A3A40;
  --bb-muted: #5E5C57;
  --bb-border: #D9D4CA;
  --bb-signal: #E8552B;

  --bb-font-display: "Sora", system-ui, sans-serif;
  --bb-font-text: "IBM Plex Sans", system-ui, sans-serif;
  --bb-font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --bb-step: 28px;      /* cut corner on cards */
  --bb-step-sm: 10px;   /* cut corner on tags/buttons */
}

/* The 45° step: one cut corner, top-right */
.bb-step    { clip-path: polygon(0 0, calc(100% - var(--bb-step)) 0, 100% var(--bb-step), 100% 100%, 0 100%); }
.bb-step-sm { clip-path: polygon(0 0, calc(100% - var(--bb-step-sm)) 0, 100% var(--bb-step-sm), 100% 100%, 0 100%); }

/* Wordmark: <span class="bb-wordmark"><b>B&amp;B</b> Lab</span> */
.bb-wordmark { font-family: var(--bb-font-display); font-weight: 300; letter-spacing: -0.038em; line-height: .9; white-space: nowrap; }
.bb-wordmark b { font-weight: 700; }

/* Step pattern background (Graphite on Ink) */
.bb-pattern {
  background-color: var(--bb-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M18.2,-2 L18.2,24.2 L26,32 L38,32 L45.8,39.8 L45.8,66' fill='none' stroke='%233A3A40' stroke-width='2.5'/%3E%3C/svg%3E");
}