/* Sugarbot UI kit: foundations. Needs tokens.css loaded first.
   Fonts are not loaded here. Each product supplies Bebas Neue its own way: Detect bundles the
   OFL file (its CSP blocks remote fonts, silently); web products load it from Google Fonts. */

/* `hidden` is only a UA-stylesheet display:none, so any author display rule beats it. This makes
   the attribute win everywhere. Detect had two shipped regressions from this before adding it. */
[hidden] { display: none !important; }

.sb-root {
  background: var(--sb-color-sweet-tooth);
  color: var(--sb-color-plumb);
  font-family: var(--sb-font-body);
  font-size: 16.5px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* One focus ring. It sits 2px off the control, so WCAG 1.4.11 measures it against the ground:
   Plum on light grounds, Molasses inside .sb-on-dark (any Plum ground: a rail, a heading band).
   Molasses on Sweet Tooth is only 2.03:1. ui/check-contrast.mjs asserts all three grounds. */
/* .sb-focus gives the ring alone, for a product whose page keeps its own ground and type. */
.sb-root :focus-visible,
.sb-focus :focus-visible {
  outline: var(--sb-focus-ring);
  outline-offset: var(--sb-focus-offset);
}
.sb-root .sb-on-dark :focus-visible,
.sb-focus .sb-on-dark :focus-visible { outline: var(--sb-focus-ring-on-dark); }
.sb-on-dark { background: var(--sb-color-plumb); color: var(--sb-color-sweet-tooth); }

/* Type roles from the guide (pp.10-11). Bebas at 400 only: the free release has one weight, and
   asking for bold makes the browser synthesise a fake one. */
.sb-h1 {
  font-family: var(--sb-h1-font);
  font-weight: var(--sb-h1-weight);
  letter-spacing: var(--sb-h1-tracking);
  font-size: calc(16.5px * var(--sb-h1-size-ratio));
  line-height: .9;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}
@media (max-width: 600px) {
  .sb-h1 { font-size: calc(16.5px * var(--sb-h1-size-ratio) * 0.75); }
}
.sb-h2 {
  font-family: var(--sb-h2-font);
  font-weight: var(--sb-h2-weight);
  letter-spacing: var(--sb-h2-tracking);
  font-size: 30px;
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
}
.sb-subtitle {
  font-family: var(--sb-subtitle-font);
  font-style: var(--sb-subtitle-style);
  color: var(--sb-body-muted);
  font-size: 17px;
  text-wrap: pretty;
}
.sb-list-title {
  font-family: var(--sb-list-title-font);
  font-weight: var(--sb-list-title-weight);
  font-style: var(--sb-list-title-style);
  letter-spacing: var(--sb-list-title-tracking);
  text-transform: var(--sb-list-title-case);
  font-size: 12.5px;
  color: var(--sb-muted);
}

@media (prefers-reduced-motion: reduce) {
  .sb-root *, .sb-root *::before, .sb-root *::after {
    animation: none !important;
    transition: none !important;
  }
}