/* APIBJJ brand tokens + motifs — source of truth: /BRAND.md
   Black belt palette: black/white/gray, red as the earned accent. */

:root {
  --paper: #fcfcfb;
  --panel: #ffffff;
  --ink: #101214;
  --muted: #5c6470;
  --faint: #979ea9;
  --line: #e2e4e8;
  --line-strong: #c9ccd2;
  --red: #b3202e;
  --red-deep: #8f1a25;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --sans: "Plus Jakarta Sans", -apple-system, sans-serif;
}

/* The belt: black bar, red rank bar, white degree stripes. */
.belt {
  height: 8px;
  background: var(--ink);
  position: relative;
}
.belt::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 48px;
  width: 112px;
  background: var(--red);
}
.belt::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 76px;
  width: 56px;
  background: repeating-linear-gradient(
    90deg, transparent 0 15px, var(--panel) 15px 19px);
}

/* Small-caps mono label — the brand's captioning device. */
.label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}