/**
 * The visual language of under your breath — every value in one place.
 *
 * ---------------------------------------------------------------------------- WHY THIS EXISTS
 *
 * This is not a new design. It is the design that was already here, extracted. The near-black
 * ground, the very low-contrast ink, the widely tracked lowercase, the long fade — all of it was
 * chosen once for water's veil and then copy-pasted into four HTML files and one injected
 * stylesheet. They had already drifted: the sensing harness was on #0d1114 with .38em tracking
 * while everything else was on #05070a with .34em, and nobody had decided that.
 *
 * So the point of this file is not that the values are right. It is that there is now exactly ONE
 * place to change them, and a page that hard-codes a colour is a bug rather than a style.
 *
 * ---------------------------------------------------------------------------- NOT YET CHOSEN
 *
 * The author has said the visual language is theirs and is coming later. These values are the
 * status quo made explicit so that pass is one file instead of five — they are a starting point,
 * not a decision, and the only thing that would be expensive to change later is the STRUCTURE
 * below (which names exist), never the numbers.
 *
 * ---------------------------------------------------------------------------- THE RULES
 *
 * 1. Only the landing, the threshold and the labs may use these. **A chapter's artwork draws in
 *    WebGL and takes no styling from here** — a medium that inherits a brand colour has stopped
 *    being a medium. The one exception is the page's own background, which is what a viewer sees
 *    for the fraction of a second before the canvas exists.
 * 2. Every consumer supplies a fallback: `var(--ub-ink-quiet, rgba(226,236,242,.34))`. The
 *    threshold injects its stylesheet from JavaScript and must still look right on a page that
 *    never linked this file.
 * 3. Opacity carries the hierarchy, not size and not weight. There is one font and one weight;
 *    what changes is how far a line is out of the dark. That is the whole register.
 */

:root {
  /* ---- ground and ink ------------------------------------------------- */
  --ub-ground: #05070a;

  /* The landing page's ground is not a flat fill — `src/app/landing/Ground.js` paints a warm
     charcoal with uneven density, slow colour temperature and grain, because a perfectly even
     dark rectangle is the one thing no natural surface ever is (fact 36). This token is only the
     colour the page shows for the fraction of a second before that canvas exists, so it is the
     LIVING GROUND'S BASE and not a second brand colour. Nothing else should use it. */
  --ub-ground-living: #0a0c0d;

  --ub-ink-rgb: 226 236 242;

  /* Four steps, and four is deliberate. A fifth would be a decision nobody could see. */
  --ub-ink-faint: rgb(var(--ub-ink-rgb) / 0.22); /* supporting text, blurbs */
  --ub-ink-quiet: rgb(var(--ub-ink-rgb) / 0.34); /* body — the default reading level */
  --ub-ink-plain: rgb(var(--ub-ink-rgb) / 0.5); /* titles, the series name */
  --ub-ink-near: rgb(var(--ub-ink-rgb) / 0.62); /* general text hover and focus */
  --ub-link-hover: rgba(186, 222, 226, .88); /* a quiet mineral tint for chapter return links */

  /* ---- type ----------------------------------------------------------- */
  /* One family, one weight, one size. See rule 3. */
  --ub-font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  --ub-font-weight: 300;
  --ub-font-size: 0.72rem;
  --ub-line-height: 2;
  --ub-font: var(--ub-font-weight) var(--ub-font-size) / var(--ub-line-height) var(--ub-font-family);

  /* Tracking is the one thing that varies, and it varies with importance rather than with size.
     `text-indent` must always match `letter-spacing`: CSS adds the space AFTER the last glyph
     too, so centred tracked text sits visibly left of centre without it. */
  --ub-track-wide: 0.46em; /* the series name */
  --ub-track: 0.34em; /* everything read as a line */
  --ub-track-close: 0.12em; /* a blurb, where the words matter more than the register */

  /* ---- motion --------------------------------------------------------- */
  /* Long. Nothing in this project arrives; things become present. */
  --ub-fade: 1600ms;
  --ub-fade-quick: 600ms;
  --ub-ease: ease;

  /* ---- measure -------------------------------------------------------- */
  --ub-reach: 34rem; /* the widest a line of text is allowed to get */
  --ub-gap: 1.15rem;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ub-fade: 200ms;
    --ub-fade-quick: 120ms;
  }
}