/* ============================================================================
   Framer — design tokens
   ============================================================================
   SCOPED TO .framer, NEVER TO :root, AND THAT IS LOAD-BEARING.

   This app is dark: its --ink is #E8E3DC, near-white, because it sits on a
   #1C1916 panel. A mounting host's --ink is likely to be the colour of body
   text on white. At :root — which is where this block lived in the standalone
   file — the app would repaint every word on the host page near-white on white.
   Nothing would error and nothing would 404; the page would simply go
   blank-looking.

   That is the 06.09 tokens.css failure with the arrow reversed: there, a missing
   token file left the APP unstyled; here, a leaking token file would take the
   HOST down. Custom properties cascade, so an app that owns a palette owns it
   from its own root element and no higher.

   --npb-red also collides, at an identical value. Harmless today, and still
   scoped, because "harmless because the numbers happen to match" is not a
   property anybody should have to re-verify.
   ========================================================================= */

.framer{
  --panel:#1C1916;
  --panel-2:#252119;
  --edge:#3A342C;
  --ink:#E8E3DC;
  --ink-dim:#9A9084;
  --ink-faint:#6B6257;
  --npb-red:#D0043C;
  --accent:var(--npb-red);

  /* Carried here from the standalone `body` rule, which is now sentinelled to
     the host that owns its whole window. Where the app is mounted, the shell
     owns the document and the app may not style it.

     The GROUND has to live here rather than on `body`, and that is not a
     tidiness call. These tokens are declared on .framer, so `body` — which is
     .framer's ancestor — cannot see them: `body{background:var(--panel)}`
     resolves to nothing and paints white, silently, on the host where the app
     owns the page. Painting the app's own root instead is correct on both
     hosts, and .framer wraps everything the app draws. */
  background:var(--panel);
  color:var(--ink);
  font-size:13px;
  -webkit-font-smoothing:antialiased;

  /* ONE face, per CLAUDE.md. The standalone tool draws its interface in IBM
     Plex Mono, which is a third-party webfont and a second typeface — both
     ruled out on this host. Corporate S is self-hosted here and carries it. */
  font-family:"Corporate S",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* Numeric readouts hold still while a slider moves. CLAUDE.md asks for tabular
   numerals on every numeric column, and a crop value that reflows as it counts
   is exactly what that rule is about. The mono face gave this for free. */
.framer output,
.framer .dims{font-variant-numeric:tabular-nums}