/* mm-theme.css — the design tokens, and the only place they are defined.

   These used to live inside the CSS string that mm-shell.js injects at runtime,
   which meant a page could only have them by loading a SCRIPT. A new page built
   with plain CSS got no tokens at all, so it either hardcoded colours — which
   then ignore the theme switch — or quietly looked like a different app.

   Now there is one file. Two ways in, same values:

     a full app page      <script src="mm-shell.js"></script>
                          (the shell links this file for you, first, so its own
                           rules resolve against these tokens)

     a standalone page    <link rel="stylesheet" href="mm-theme.css">
                          (tokens only — no shell chrome, no nav, no reset)

   Nothing here styles an element. It declares custom properties and nothing
   else, so linking it cannot collide with a page's own rules no matter where in
   the cascade it lands. That is what makes it safe to add to an existing page.

   ── LIGHT THEME ──────────────────────────────────────────────────────────────
   Selected by `body.site-light`, which theme-studio.js sets from
   localStorage.site_theme_v2. Not prefers-color-scheme: the app has an explicit
   switch and the OS setting must not override a choice the user made.

   ── THE NEUTRALS ─────────────────────────────────────────────────────────────
   The Zinc ramp, matched against a reference terminal's own stylesheet rather
   than picked by eye. Two properties matter more than the exact values:

     the ground is NEUTRAL, faintly cool — #09090b, not a blue-black. A blue cast
     under every panel makes green and red read warmer than they are, and chrome
     must not do that on a page where those two are the only colours carrying
     meaning.

     the border is an ALPHA, not an opaque line. One value then sits correctly on
     the page ground AND on a raised panel, so nested panels stop showing a seam
     where they meet.                                                          */

:root{
  /* surfaces, back to front */
  --bg:#09090b;
  --panel:#121215;
  --panel2:#18181b;
  --line:#a3b2ca24;

  /* text, three weights. --mut clears AA (5.5:1) on every surface above. */
  --txt:#fafafa;
  --dim:#a1a1aa;
  --mut:#8b8b94;

  --accent:var(--color-accent,#cdd5e2);
  --accent-wash:rgba(255,255,255,.055);

  /* Green and red are the only colours that carry meaning. Everything else is
     chrome, which is how a data-heavy terminal reads as calm rather than loud.
     Never use these two for decoration. */
  --green:#33b890;
  --red:#ec4b5e;
  --gold:#f5c451;
  --purple:#cdd5e2;

  --radius:13px;

  /* One family for the whole app. The stack used to name "Google Sans" and
     "Google Sans Text" first, but both are proprietary and on no machine here,
     so headings resolved to DM Sans while body text resolved to Roboto — two
     different faces on the same panel, which is what it looked like. Inter is
     self-hosted in /assets/fonts/mm-fonts.css at 400/500/600/700, the only hosted
     family that covers every weight the pages ask for (DM Sans and Roboto have
     no 600, so a 600 heading was silently promoted to 700). */
  --mm-display:Inter,Roboto,Arial,'Segoe UI',sans-serif;
  --mm-text:Inter,Roboto,Arial,'Segoe UI',sans-serif;

  /* Twelve stylesheets reference --mm-mono for tabular figures, and
     scalp-v2.css documents this file as its home, but it was never actually
     declared here. A `font:` shorthand naming an undefined family is invalid,
     so every .q-card-value fell back to the browser default serif while the
     rest of the page stayed Inter -- which is exactly the one-page-looks-
     different failure that comment warns about.

     Reddit Mono is already self-hosted in /assets/fonts/mm-fonts.css. */
  --mm-mono:'Reddit Mono','SF Mono',Menlo,Consolas,'Courier New',monospace;

  /* ── THE TYPE RAMP ────────────────────────────────────────────────────────
     One ladder, and the only place a font size is declared. The steps are the
     sizes the app already leant on: 10/11/12/13/14 carried three quarters of
     every rule in the codebase. Four larger steps exist so a headline figure
     on a dashboard is not flattened into a label.

     10px is the FLOOR. There were 89 rules below it — 8px uppercase in --mut,
     the lowest-contrast text token, tracked out by half a pixel. That is three
     things working against legibility on the same string, and it is the one
     part of this consolidation that is a fix rather than a tidy-up. */
  --type-micro:10px;
  --type-label:11px;
  --type-body:12px;
  --type-read:13px;
  --type-lead:14px;
  --type-title:16px;
  --type-page:18px;
  --type-hero:20px;
  --type-display:24px;
  --type-mega:28px;
  --type-giant:38px;

  /* The names that came before, each pointing at its own value on the ramp, so
     no existing rule changes size. Tables still run head and body at the SAME
     size — a heading separated by case, tracking and colour is already
     distinct, and one that is also bigger says the same thing twice. */
  --fs-table:var(--type-label);
  --fs-body:var(--type-body);
  --fs-label:var(--type-micro);
  --fs-title:var(--type-body);
  /* referenced by .q-card-sub and .spxp-status, declared nowhere until now —
     both fell through to their own 10px fallback, which is what this keeps. */
  --fs-small:var(--type-micro);

  /* moved here from fonts/mm-fonts.css, which is a font FILE and should not
     have been carrying half the scale. */
  --h-page:var(--type-page);    --h-page-w:600;
  --h-section:var(--type-lead); --h-section-w:600;
  --h-panel:var(--type-body);   --h-panel-w:600;
  --h-sub:var(--type-label);    --h-sub-w:600;
  --t-body:var(--type-lead); --t-small:var(--type-label); --t-micro:var(--type-micro);
}

body.site-light{
  --bg:#f4f4f5;
  --panel:#fff;
  --panel2:#f7f7f8;
  --line:#0000001f;

  --txt:#111114;
  --dim:#3f3f46;
  --mut:#71717a;

  --accent:var(--color-accent,#39414f);
  --accent-wash:rgba(20,28,45,.05);
}