/* The only tokens file a component or preview should import.
 * See .claude/rules/design.md.
 */

@import "./color.css";
@import "./type.css";
@import "./space.css";

/* Minimal base. Not a reset library — just the things every preview needs so components
 * are judged on their own merits rather than on browser defaults.
 */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Explicit background and colour: a transparent body borrows the host's theme. */
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

/* The `hidden` attribute must actually hide.
 *
 * The browser default is [hidden] { display: none }, but any author rule that
 * sets display — .card { display: flex }, for one — beats it on specificity.
 * The element stays visible while the markup says it is hidden, which is a
 * silent, confusing bug wherever it happens.
 *
 * !important is deliberate here: `hidden` is a statement of fact, not a
 * suggestion, and there is no case where a component should override it. */
[hidden] {
  display: none !important;
}

/* Media never overflows its container. */
img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

/* Form controls do not inherit font by default. */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* One focus style, defined once, used everywhere.
 * :focus-visible so a mouse click doesn't show a ring but keyboard navigation always does.
 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* Body copy stays readable. */
:where(p) {
  max-width: var(--measure);
}