/* Front-end base: the page as a sheet and what every block shares. The blocks' own rules
   are in blocks.css, the header and footer in chrome.css. Only custom properties: layer 1
   from tokens.css and the --section-* properties each section sets in sections.css
   (layer 2). No literal colours, pixel values, fonts or shadows. */

/* The page as a sheet (PLAN.md D-031)

   body carries what is AROUND the page and .page carries the page. The inset is one token:
   zero when the design is not boxed, so the surrounding colour is never visible and no text
   can sit on it — which is what keeps the palette's contrast guarantee intact without
   adding a single pair to it.

   Fallbacks name the old behaviour, so a site whose stylesheet predates these tokens
   renders exactly as it did. */
body {
  margin: 0;
  padding: var(--page-frame, 0);
  color: var(--color-text);
  background: var(--page-bg, var(--color-background));
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.page {
  background: var(--page-sheet, var(--color-background));
}


.container {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-l);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  line-height: var(--leading-heading);
}

a {
  color: var(--section-link, var(--color-link));
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 0.18em;
}

code {
  padding: 0 var(--space-xs);
  background: var(--color-surface);
  border-radius: var(--radius-s);
}

.not-found {
  padding-block: var(--space-2xl);
}

.not-found h1 {
  font-size: var(--text-3xl);
}

.meta {
  color: var(--color-muted);
}

.locale-switcher {
  display: flex;
  gap: var(--space-m);
  padding-block: var(--space-l);
}

.locale-switcher [aria-current] {
  color: var(--color-text);
  text-decoration: none;
}

/* Shared parts of blocks */

.button {
  display: inline-block;
  padding: var(--space-s) var(--space-l);
  color: var(--section-button-text);
  background: var(--section-button-bg);
  border: var(--border-card) solid var(--section-text);
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-s);
  font-weight: var(--heading-weight);
  text-decoration: none;
}

/* Tinted and outlined from the section's own text colour (see --section-placeholder in
   sections.css), so it stays visible on a pale surface and on a dark one alike. A fill
   picked to suit one surface reads as a hole on another. */
.media-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--section-placeholder);
  border: var(--border-width) solid var(--section-placeholder-edge);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-m);
}

.richtext > :first-child {
  margin-top: 0;
}

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

.richtext h2 {
  font-size: var(--text-xl);
}

.richtext h3 {
  font-size: var(--text-lg);
}

/* The third level a rich text field can hold (PLAN.md D-016). It sits at body size and is
   told apart by the heading family, weight and tracking the rule above gives it, so the
   character decides how far it stands out rather than a size chosen here. */
.richtext h4 {
  font-size: var(--text-base);
}

.richtext blockquote {
  margin-inline: 0;
  padding-inline-start: var(--space-m);
  border-inline-start: var(--border-width) solid var(--section-link);
  font-size: var(--text-lg);
}

@media (max-width: 40rem) {
  /* A boxed page keeps a sliver of its frame on a phone rather than the whole of it:
     measured, Soft's frame took 144 of a 390-pixel screen and left the header 150 to
     draw in. min() leaves an unboxed page (frame 0) exactly as it was. */
  body {
    padding: min(var(--page-frame, 0rem), 3vw);
  }
}