/* Boditrax website - Base elements
 * Site-wide element defaults: body, headings, selection colour and focus rings.
 * Generated from the original compiled stylesheet; rule order is significant. */
@layer base {
  * {
    border-color: var(--color-border);
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  /* Long words (German, Icelandic and Finnish compounds such as "kardiometabolische") would otherwise push headings and
     text wider than a phone screen; they may break, with a hyphen where the browser knows the page's language. */
  h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, label, summary {
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  h1, h2 {
    font-weight: 500;
  }
  h3, h4 {
    font-weight: 450;
  }
  h1, h2 {
    color: var(--brand-plum);
  }
  ::selection {
    background: var(--brand-yellow);
    color: var(--brand-yellow-foreground);
  }
  :root {
    --focus-ring: var(--brand-plum);
  }
  .bg-ink, .bg-graphite, .bg-plum, .dark, [data-surface="dark"] {
    --focus-ring: var(--brand-yellow);
  }
  :focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
  }
  @media (forced-colors: active) {
    :focus-visible {
      outline-color: Highlight;
    }
  }
}