/* ─────────────────────────────────────────────────────────────────────────
   tissue.systems — palette

   Every colour a public surface paints comes from a --tissue-* name defined
   here, and nowhere else holds a literal. www, docs, support, auth and the
   dashboard each map their own local names onto these
   (`--text2: var(--tissue-ink-2)`), and chrome.js reads them straight through
   `:host` — custom properties inherit across a shadow boundary, so a token set
   on :root reaches inside the header's shadow root.

   Changing a colour is one edit here plus a redeploy of www, docs, dashboard,
   auth and support.

   Every consumer passes the light value as the var() fallback, so a surface
   that fails to load this file still paints its light palette rather than
   falling back to the browser's black-on-white.

   ── The system ─────────────────────────────────────────────────────────
   The page is a naturalist's ledger: a dictionary set in monospace,
   illustrated with engraved plates. There is one ground and one panel, and
   no third surface. No radii, no shadows, no glass, no gradients — emphasis
   is carried by italic, by the sage second voice, and by 1px rails.
   Reference implementation: mockups/public/b4a-dash.html (light) and
   b4c-docs.html (both themes). Spec: plans/proposals/ui-spec-2026-08.md.

   ── Dark ───────────────────────────────────────────────────────────────
   Dark reaches a surface only when something stamps the root element:
   `data-theme="dark"` (docs, from the pre-paint script in its template) or
   `class="dark"` (dashboard, from next-themes). www, auth and support stamp
   neither and are light-only by design — there is no prefers-color-scheme
   rule here, so an OS in dark mode does not drag them along. The reason is
   in the spec §6.2: the light page is a paper object with engraved plates,
   and a dark edition is a different design rather than a recolour.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* ground and panel — the only two surfaces the system has */
  --tissue-bg:        #ffffff;
  --tissue-panel:     #f4f4f1;

  /* ink, three voices: body, the sage second voice, the grey meta voice */
  --tissue-ink:       #222222;
  --tissue-ink-2:     #55625b;
  --tissue-ink-3:     #8a8a85;

  /* hairlines. --tissue-line rules on the page ground; --tissue-line-2 is the
     same rule drawn on --tissue-panel, where the first one disappears. */
  --tissue-line:      #e6e6e1;
  --tissue-line-2:    #cfcfc9;

  /* brand green */
  --tissue-accent:       #00875f;
  --tissue-accent-br:    #00b57e;
  --tissue-on-accent:    #ffffff;

  /* the rails. A dashed warm-brown rail means "this folds open"; a solid
     gate-green rail means "this is open now". The rail is the system's one
     interaction affordance and it carries navigation too. */
  --tissue-rail:         #8a7d6b;
  --tissue-rail-open:    #8fbfa5;

  /* status */
  --tissue-danger:       #c0392b;
  --tissue-amber:        #b7791f;

  /* Plates are artifacts, not themed components: an engraving keeps its paper
     ground in dark mode exactly as the old dark code plate kept its ink in
     light. Plate-internal colours (mid-ink, leader, plate-blue, plate-green,
     gate-green, nucleus cream) live inside the SVGs, not here. */
  --tissue-plate-paper:  #f6f1e4;
  --tissue-plate-ink:    #4a3f33;

  /* type. One face for everything — body, headings, nav, UI and code — set
     properly: measure capped at 42em, real leading, an italic second voice.
     IM Fell is loaded only by pages that carry a plate. */
  --tissue-font-mono:    "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --tissue-font-plate:   "IM Fell English", Georgia, "Times New Roman", serif;
  --tissue-font-plate-sc:"IM Fell English SC", Georgia, serif;

  /* metrics. --tissue-measure is the prose column every reading surface caps
     itself at. --tissue-hdr-max is the width of the header's inner container
     and is the only thing that decides header alignment: docs overrides it to
     `none` so the wordmark keeps its sidebar alignment.

     --tissue-header-h is the rendered height of <tissue-header>, measured:
     .inner pads .7rem (11.2px) above and below the wordmark's 27.23px line box
     and the bar carries a 1px rule, so 11.2 + 27.23 + 11.2 + 1 = 50.61px. The
     same in all three variants — plain, `sticky` (docs), `minimal` (auth).

     The padding is authored in `rem`, which resolves against the 16px document
     root and NOT against the header's own 15px base: multiplying by 15 and
     writing the result in `rem` is what put this token 12px over the bar it
     describes. Anything mirroring this value carries 50.61px as its fallback.

     Surfaces that hang a sticky rail below the header compute from it
     (`top: var(--hdr)`, `calc(100svh - var(--hdr))`), so it has to stay a
     length — `auto` there resolves to an invalid `top` and the rail unsticks. */
  --tissue-measure:   42em;
  --tissue-hdr-max:   1140px;
  --tissue-header-h:  50.61px;

  /* ── retired, aliased for migration ──────────────────────────────────
     The ledger has one ground, one panel, no glass and no shadows, and its
     code blocks are light chips rather than the old dark-navy plate. These
     names still appear in per-surface adapter layers; they resolve to the
     nearest surviving role until those layers stop asking for them. */
  --tissue-bg-2:      var(--tissue-panel);
  --tissue-bg-3:      var(--tissue-panel);
  --tissue-paper:     var(--tissue-bg);
  --tissue-fill:      var(--tissue-panel);
  --tissue-fill-2:    var(--tissue-panel);
  --tissue-hover:     var(--tissue-panel);
  --tissue-accent-dp:    var(--tissue-accent);
  --tissue-accent-soft:  transparent;
  --tissue-accent-wash:  transparent;
  --tissue-accent-glow:  transparent;
  --tissue-accent-halo:  transparent;
  --tissue-glass:        var(--tissue-bg);
  --tissue-glass-solid:  var(--tissue-bg);
  --tissue-code-bg:      var(--tissue-panel);
  --tissue-code-hd:      var(--tissue-panel);
  --tissue-code-ink:     var(--tissue-ink);
  --tissue-code-bright:  var(--tissue-ink);
  --tissue-code-soft:    var(--tissue-panel);
  --tissue-code-soft-br: var(--tissue-line);
  --tissue-danger-soft:  transparent;
  --tissue-danger-line:  var(--tissue-danger);
  --tissue-font-body:    var(--tissue-font-mono);
  --tissue-font-display: var(--tissue-font-mono);
  --tissue-shadow-xs: none;
  --tissue-shadow-sm: none;
  --tissue-shadow-lg: none;
}

/* Dark — the carbon ramp, frozen 2026-08-22. A neutral near-black ground with
   the green cast carried by the accents rather than mixed into the ground. The
   hairline and panel sit one visible step off the ground on purpose: the first
   cut used #2d2d2b / #222220 and both sank into it.

   Two selectors for two stamping mechanisms; keep them together so the values
   can never drift apart. */
:root[data-theme="dark"],
:root.dark {
  color-scheme: dark;

  --tissue-bg:        #191919;
  --tissue-panel:     #272725;

  --tissue-ink:       #e3e2de;
  --tissue-ink-2:     #a4b0a7;
  --tissue-ink-3:     #85857f;

  --tissue-line:      #343431;
  --tissue-line-2:    #454542;

  /* #00875f fails contrast against a near-black ground; the whole green ramp
     lifts one step rather than the accent alone, so tints stay in family. */
  --tissue-accent:       #2fbd8f;
  --tissue-accent-br:    #4fd8a8;
  --tissue-on-accent:    #06231a;

  --tissue-rail:         #9c8e79;
  --tissue-rail-open:    #55806a;

  --tissue-danger:       #e8796a;
  --tissue-amber:        #d9a05b;

  /* plate paper and plate ink do not flip — see the light block */
}