/*
 * Global foundation and the single semantic token contract.
 *
 * Every token NAME used anywhere in this repository is declared here, with the
 * unthemed default value. A theme file states only the values it needs to
 * differ on, plus tokens that are genuinely structural to that theme alone
 * (the corporate header height, the disclosure link colours). One concept has
 * exactly one name: do not introduce a parallel token for a role that already
 * exists below.
 *
 * Theme tokens are declared on :root rather than on the theme body class,
 * because page_registry() guarantees exactly one theme stylesheet per page and
 * because html-level rules consume them -- pages/home.css sets
 * scroll-padding-top on html, which cannot inherit a value defined on body.
 */
:root {
  color-scheme: light;

  /* Colour. Semantic roles, not literal shades. */
  --color-ink: #111111;
  --color-ink-soft: #303030;
  --color-paper: #ffffff;
  --color-muted: #5d5d5d;
  --color-line: #d4d4d4;

  /* Typeface roles. */
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui: Arial, Helvetica, sans-serif;
  --font-mono: "DejaVu Sans Mono", "Liberation Mono", "Lucida Console", monospace;

  /* Type scale, smallest to largest. */
  --size-label: 0.75rem;
  --size-small: 0.875rem;
  --size-body: 1rem;
  --size-lede: 1.0625rem;
  --size-brand: 1.2rem;
  --size-heading: clamp(1.75rem, 3vw, 2.5rem);

  /* Line heights. */
  --line-heading: 1.15;
  --line-snug: 1.4;
  --line-body: 1.6;

  /* Letter spacing. Positive for uppercase runs, negative for large display. */
  --tracking-label: 0.06em;
  --tracking-wide: 0.12em;
  --tracking-tight: -0.035em;

  /* Layout. */
  --content-width: 72rem;
  --text-measure: 42rem;
  --page-gutter: 1.25rem;
  --control-min-height: 2.75rem;
  --border-width: 1px;

  /* Spacing scale. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 3rem;
  --space-9: 4rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; }

a:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

.skip-link,
.skip-link:visited {
  position: absolute;
  z-index: 30;
  top: -5rem;
  left: var(--page-gutter);
  padding: var(--space-2) var(--space-3);
  background: var(--color-ink);
  color: var(--color-paper);
  text-decoration: none;
}

.skip-link:focus { top: var(--space-4); }

.shell {
  width: min(
    calc(100% - var(--page-gutter) - var(--page-gutter)),
    var(--content-width)
  );
  margin: 0 auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 31rem) {
  body { --page-gutter: 1rem; }
}