/* Ruminous Labs — design tokens
 *
 * Colour source of truth: brand/ruminous-labs-tokens.css, whose two anchor
 * values were sampled from flat interior pixels of Kami's logo artwork itself
 * (modal RGB over pixels whose full 8-neighbourhood is inside the shape) and
 * whose derived values are hue-locked in OKLCH and numerically contrast-checked.
 * They are kept here as the exact brand hex so this page cannot drift from the
 * proposal, the deck, or the mark. Do not re-derive them by eye.
 *
 * This page sits on the deep ground, so it uses the ON-DARK lockup: the navy
 * head dot is 1.26:1 against #0c102c and disappears, and is knocked out to the
 * light value — the same inversion Kami's own on-dark lockups use.
 */
:root {
  /* ---- brand anchors ---- */
  --color-peri:        #a0c0e6;  /* logo strokes. 9.93:1 on the deep ground   */
  --color-navy:        #182551;  /* logo head dot on LIGHT grounds only       */

  /* ---- grounds ---- */
  --color-paper:       #0c102c;  /* deep ground. 18.65:1 with the light ink   */
  --color-paper-2:     #121734;  /* hairline / raised ground                  */

  /* ---- ink on the deep ground ---- */
  --color-ink:         #f6fcff;  /* primary text.   18.01:1                   */
  --color-ink-2:       #bfc5cc;  /* secondary text. 10.72:1                   */
  --color-ink-3:       #8891a3;  /* labels, meta.    5.31:1                   */

  /* ---- the mark, as drawn on this ground ---- */
  --mark-stroke:       var(--color-peri);
  --mark-head:         var(--color-ink);

  /* ---- lines and focus ---- */
  --color-rule:        #23294a;
  --color-focus:       var(--color-peri);  /* 9.93:1 on the ground            */

  /* ---- type ----
   * Body is Plus Jakarta Sans. The WORDMARK is Comfortaa 500, matching the
   * Mecklenburg IAF proposal's lockup exactly.
   *
   * That face was chosen by comparing against Kami's OWN wordmark on page 7 of
   * her deck: hers is a display font that could not be identified from the 44KB
   * JPEG — squarish bowls with circular counters, flat cut terminals — and no
   * Google face matches it. Comfortaa is the closest available on the same DNA:
   * geometric, rounded, single-storey 'a', circular counters, wide. Held at 500
   * rather than her heavy weight, because a heavy wordmark overpowers the
   * hairline mark beside it (Plus Jakarta 800 did exactly that).
   *
   * This is the nearest match, NOT an exact one — the only exact route is the
   * font name or the vector from Kami. It supersedes an earlier Quicksand pass,
   * which was picked for round terminals before Kami's flat cut terminals were
   * read off page 7. */
  --font-body:     "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-wordmark: "Comfortaa", "Plus Jakarta Sans", Helvetica, Arial, sans-serif;

  /* The lockup is ~7.6x the wordmark's font-size wide (mark + gap + 13
   * characters of Comfortaa 500), so the vw term and the floor are set to keep
   * it inside the page padding at 320px without the mark going hairline. */
  --text-wordmark: clamp(2rem, 7.4vw, 7rem);
  --text-slogan:   clamp(1.125rem, 1.7vw, 1.75rem);
  --text-body:     clamp(0.9375rem, 1.05vw, 1.0625rem);
  --text-label:    0.6875rem;

  /* ---- the lockup's own proportions (brand-specified, do not tune) ----
   * The mark IS the letter R: the wordmark reads "uminous Labs" and the two
   * lock into one word. Mark height is 1.576em of the wordmark's font-size, the
   * gap is letter-spacing rather than a word-space, and the two are aligned on
   * the text baseline — so it reads as a glyph, not a logo beside a name.
   * These four values are copied from the Mecklenburg IAF proposal's lockup. */
  --lockup-mark-h:    1.576em;
  --lockup-gap:       0.18em;
  --wordmark-track:   0;
  --wordmark-weight:  500;

  /* The mark's viewBox carries a 1-unit margin, which is why the height is
   * 1.576em and not a round 1.6em — that renders the ink at the same size a
   * flush box did. tools/build.py refuses to build if either of these drifts
   * from the mark vector itself. */
  --mark-viewbox:     "11.797 14.857 228.373 417.75";
  --mark-aspect:      0.546679;  /* 228.373 / 417.75, the artwork's own ratio */

  /* The monoline's width, measured by perpendicular cross-section of the source
   * artwork (see tools/trace-centerlines.py). The arm and the legs land on the
   * same 23.00, which is what makes a single constant width honest. Do not
   * eyeball this — a 9% error here renders the mark as a hairline. */
  --mark-stroke-w:    23;

  /* ---- 4pt spacing scale ---- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  --rule-hair: 1px;
  --radius-sm: 4px;

  /* ---- motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-dot:    560ms;
  --dur-flare: 1000ms;
  --dur-arm:    860ms;
  --dur-legs-a: 780ms;
  --dur-legs-b: 600ms;
  --dur-rise:   640ms;
  --dur-quick:  180ms;

  /* Reveal timeline. The head comes first and alone — a dot of light switching
   * on, which the page's own glow blooms from — and the figure is then drawn
   * around it: the raised arm sweeps over, the stem drops in and the front leg
   * reaches out, then the back leg extends to open the stride. Branch B starts
   * just after branch A passes the junction the two share (~17% along it), so
   * the legs open from the point the eye is already on. */
  --at-head:     200ms;
  --at-arm:      820ms;
  --at-legs-a:  1280ms;
  --at-legs-b:  1580ms;
  --at-wordmark:1980ms;
  --at-slogan:  2140ms;
  --at-foot:    2300ms;
  --at-status:   300ms;
}