/* Elements, layout and typography. Every value comes from tokens.css. */

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

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

body {
  margin: 0;
  background: var(--tm-surface);
  color: var(--tm-text);
  font-family: var(--tm-font-sans);
  font-size: 16px;
  line-height: 24px;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0 0 var(--tm-space-4); font-weight: 700; }
h1 { font-size: 34px; line-height: 40px; }
h2 { font-size: 24px; line-height: 30px; }
h3 { font-size: 18px; line-height: 24px; }

p, ul, ol { margin: 0 0 var(--tm-space-4); }

a { color: var(--tm-text); text-underline-offset: 3px; }
a:hover { text-decoration: underline; }

/* The brand has no rounded UI. */
input, select, textarea, button { font: inherit; color: inherit; border-radius: var(--tm-radius-square); }
input, select, textarea { border: 1px solid var(--tm-text); background: var(--tm-surface); padding: var(--tm-space-3); border-radius: var(--tm-radius-soft); }

/* Focus is never removed. Solid, 2px, 2px offset, and it clears 3:1 on every surface. */
:focus-visible { outline: 2px solid var(--tm-focus-ring); outline-offset: 2px; }

.tm-skip-link {
  position: absolute;
  left: -9999px;
  background: var(--tm-action);
  color: var(--tm-on-action);
  padding: var(--tm-space-3) var(--tm-space-4);
  z-index: 100;
}
.tm-skip-link:focus { left: var(--tm-space-4); top: var(--tm-space-4); }

.tm-wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--tm-space-4);
}

.tm-main { padding-block: var(--tm-space-6); }
.tm-main--full { padding-block: 0; }

.tm-prose > :last-child { margin-bottom: 0; }

/* Type scale classes, generated in tokens.css, are used directly in templates. */
.tm-price { font-size: 16px; line-height: 22px; font-weight: 700; }
.tm-micro { font-size: 12px; line-height: 16px; }

@media (max-width: 640px) {
  h1 { font-size: 28px; line-height: 34px; }
  .tm-main { padding-block: var(--tm-space-5); }
}