/* WHEELS — Base / reset
   Light element defaults so demos and kits inherit the brand floor.
   Scoped to be unobtrusive — only sets sensible warm-editorial defaults. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  color: var(--text-heading);
  margin: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

::selection { background: var(--coral-tint); color: var(--ink); }

/* Utility surfaces ------------------------------------------------ */
.wh-on-dark { background: var(--bg-inverse); color: var(--text-on-inverse); }
.wh-container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-lg); }

/* The Anthropic-style 4-spoke spike mark, WHEELS-tinted.
   Used as the wordmark prefix and inline content marker. */
.wh-spike {
  display: inline-block;
  width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--wh-spike-mask) center / contain no-repeat;
          mask: var(--wh-spike-mask) center / contain no-repeat;
  vertical-align: -0.08em;
}
:root {
  --wh-spike-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0c4 30 16 42 46 46-30 4-42 16-46 46-4-30-16-42-46-46 30-4 42-16 46-46z'/%3E%3C/svg%3E"); /* @kind other */
}