/* The design system itself: base styles and the components a product adopts.
   Every value is a custom property from tokens.css, which the build writes
   from tokens.json. Documentation chrome lives in viewer.css. */

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

html { color-scheme: dark; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.6;
}

img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; }
a { color: inherit; }
code, pre { font-family: var(--font-mono); font-size: 0.85em; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-accent) 42%, transparent); outline-offset: 3px; }

/* ---- button ---- */
.button {
  display: inline-flex;
  min-height: 2.875rem;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-6);
  border: var(--size-line) solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-surface);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}

.button:hover { background: color-mix(in srgb, var(--color-accent) 86%, var(--color-ink)); }
.button--secondary { border-color: var(--color-line); background: var(--color-surface); color: var(--color-ink); }
.button--secondary:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }

/* ---- field ---- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-size: var(--type-small); font-weight: 700; }
.field input {
  min-height: 3rem;
  padding: 0 var(--space-3);
  border: var(--size-line) solid var(--color-muted);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
}
.field small { color: var(--color-muted); font-size: var(--type-small); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}

/* ---- site layout ---- */
/* The pieces a whole page is composed from; the website design under
   /designs/ uses only these and the components above. */
.wrap { width: min(100% - 2 * var(--space-6), var(--size-content)); margin-inline: auto; }

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--size-header);
  padding-block: var(--space-3);
  border-bottom: var(--size-line) solid var(--color-line);
}
.site-header__brand { font-family: var(--font-serif); font-size: var(--type-lead); font-weight: 700; text-decoration: none; }
.site-nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.site-nav a { color: var(--color-muted); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-accent); }

.hero { padding-block: var(--space-12); }
.hero h1 { margin: 0 0 var(--space-4); font-family: var(--font-serif); font-size: var(--type-display); line-height: 1.1; }
.hero p { max-width: 36rem; margin: 0 0 var(--space-6); color: var(--color-muted); font-size: var(--type-lead); }
.hero .button + .button { margin-left: var(--space-3); }

.section { padding-block: var(--space-8); border-top: var(--size-line) solid var(--color-line); }
.section h2 { margin: 0 0 var(--space-3); font-family: var(--font-serif); font-size: var(--type-title); line-height: 1.2; }
.section p { max-width: 40rem; margin: 0 0 var(--space-4); }

.form { display: grid; gap: var(--space-4); max-width: 28rem; }
.form .button { justify-self: start; }

.notice {
  padding: var(--space-4) var(--space-6);
  border: var(--size-line) solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
}

.site-footer { padding-block: var(--space-6); border-top: var(--size-line) solid var(--color-line); color: var(--color-muted); font-size: var(--type-small); }
/* ---- end site layout ---- */