/* Base for every mockup. Link it first: <link rel="stylesheet" href="../../base.css">
 *
 * Tokens come from packages/design-tokens, the same files the app loads.
 * Do not copy token values into design/. To change a token, open a PR to
 * packages/design-tokens (see design/AGENTS.md). */

@import url("https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&display=swap");
@import url("../packages/design-tokens/css/typography.css");
@import url("../packages/design-tokens/css/color-and-shadow.css");
@import url("../packages/design-tokens/css/layout.css");
@import url("../packages/design-tokens/css/text-styles.css");
@import url("../packages/design-tokens/css/document-sheet.css");

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

html,
body {
  margin: 0;
}

body {
  background: var(--color-bg-subtle);
  color: var(--color-fg-default);
  font-family: var(--font-family-sans);
  font-size: var(--text-body-md-size);
  font-weight: var(--text-body-md-weight);
  line-height: var(--text-body-md-line-height);
  letter-spacing: var(--text-body-md-letter-spacing);
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 0.9s linear infinite;
}