/* CSS systems — base (#503)
 *
 * Site-wide element rules and the shared colour-cycle animation, moved
 * out of the homepage's inline <style> so there is one source. This is a
 * foundation *extraction with bounded, intentional improvements* — not a
 * byte-verbatim move. The deliberate changes (each preserving the live
 * rendering) are:
 *   - `html` and `body` are fully separated rules (no shared selector);
 *     the page gradient + `height: 100%` are on `html` only, so body's
 *     min-height: 100dvh never conflicts and no double-paint occurs;
 *   - brand / gradient / ink values reference css/tokens.css tokens with
 *     inline var() fallbacks, so rendering is correct even if tokens.css
 *     fails to load or a token is undefined at computed time;
 *   - the form-control reset now covers `button` + adds `color: inherit`
 *     and `line-height: inherit` (refs #515, #521). Affected surfaces and
 *     regression coverage are listed in the PR description.
 * See the PR for the manual preview checklist. */

html {
  /* Page gradient and full-viewport height stay on the root element only —
     keeps gradient off body and avoids a min-height: 100dvh conflict.
     Inline var() fallbacks ensure rendering if tokens.css fails to load. */
  width: 100%;
  overflow-x: hidden;
  position: relative;
  background: linear-gradient(10deg, var(--gradient-from, #F66633), var(--gradient-to, #6969F3)) no-repeat center center;
  background-size: cover;
  height: 100%;
}

body {
  width: 100%;
  overflow-x: hidden;
  position: relative;
  font-family: 'Lucida Console', Courier, monospace;
  text-align: center;
  color: var(--ink, #420);
  margin: 0;
  padding: 0;
  /* Vertical scroll is the escape hatch when a short (landscape)
     viewport can't fit the column; the modal layers are fixed and
     unaffected. `safe` keeps centring from clipping the top edge
     once content overflows (engines without it keep plain center).
     Address-bar collapse trade-off tracked in #527 / #531. */
  overflow-y: auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  justify-content: safe center;
  align-items: center;
  align-items: safe center;
}

/* Form-control reset — three intentional improvements over the homepage's
   original `input, textarea, select` rule (refs #515, #521):
   - `button` included: consistent 16px/mobile-safe sizing for all controls.
   - `color: inherit`: propagates body ink (#420) instead of UA system colour.
   - `line-height: inherit`: consistent metrics; UA ignores inheritance here.
   Component-owned rules (higher specificity) override where needed (e.g.
   sparkle triggers keep their 50×50 footprint; ENTER keeps its large font).
   Regression coverage: 'Foundation extraction regressions' in
   tests/e2e/index-features.spec.js. */
input, textarea, select, button {
  font-size: 16px;
  /* Intentional UX choice: sans-serif for form controls diverges from the
     monospace body stack. UA defaults (often Times/serif) hurt legibility in
     inputs; Helvetica/Arial is the designed baseline here, not an oversight. */
  font-family: Helvetica, Arial, sans-serif;
  color: inherit;
  line-height: inherit;
}

main {
  /* Dead code on the current homepage (wrapper is <div class="main">).
     Activates when #528 / #530 swaps the element to semantic <main>.
     Kept here as the intended base layout for all pages going forward. */
  max-width: 70ch;
  padding: 2ch;
  margin: auto;
}

.header {
  padding: 1em;
  text-align: center;
}

.header h1 {
  font-size: 5em;
  font-size: clamp(2.4em, min(9vw, 13vh), 5em);
  font-weight: bolder;
  font-family: 'Gill Sans', Corbel, Tahoma, sans-serif;
  letter-spacing: -3px;
  color: var(--brand-cyan-muted, hsla(194, 69%, 52%, 1));
  animation: cycleh1 15s linear 0s infinite;
  margin-top: 0;
  margin-bottom: 0.5em;
}

.header h1:hover {
  animation: cycleh1hover 3s linear 0s infinite;
}

p {
  padding: 0.5em;
  margin: 0; /* Reduce spacing between paragraphs */
}

a {
  font-weight: bold;
  color: var(--brand-cyan, #18C1F3);
}

a:hover {
  color: pink;
  outline-width: 0;
  animation: cycleh1hover 1s linear 0s infinite;
}

/* Colour-cycle keyframes (single source; the homepage previously
   inlined its own copy). Modern engines only — no -webkit- twin. */
@keyframes cycleh1 {
  0%   { color: hsl(194, 69%, 52%); }
  5%   { color: hsl(194, 69%, 52%); }
  17%  { color: hsl(254, 69%, 52%); }
  34%  { color: hsl(314, 69%, 52%); }
  50%  { color: hsl(34, 69%, 52%); }
  55%  { color: hsl(34, 69%, 52%); }
  66%  { color: hsl(314, 69%, 52%); }
  83%  { color: hsl(254, 69%, 52%); }
  100% { color: hsl(194, 69%, 52%); }
}

@keyframes cycleh1hover {
  0%   { color: hsl(34, 69%, 52%); }
  10%  { color: hsl(34, 69%, 52%); }
  17%  { color: hsl(334, 69%, 52%); }
  34%  { color: hsl(274, 69%, 52%); }
  50%  { color: hsl(214, 69%, 52%); }
  66%  { color: hsl(274, 69%, 52%); }
  83%  { color: hsl(334, 69%, 52%); }
  100% { color: hsl(34, 69%, 52%); }
}