/* ─────────────────────────────────────────────────────────────────────────
   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 (CLAUDE.md → "Palette and logo are hand-duplicated").

   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.

   ── 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). The marketing pages 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.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* grounds, lightest → deepest */
  --tissue-bg:        #f4f6f4;
  --tissue-bg-2:      #eef1ee;
  --tissue-bg-3:      #e4e9e5;
  --tissue-paper:     #ffffff;
  --tissue-panel:     #fbfcfb;

  /* A fill that sits ON --tissue-paper: a selected segment, an active row, a
     hover plate. It needs its own name because the direction reverses between
     themes — paper is the lightest surface here and the darkest one in dark, so
     a fill drawn from the ground ramp lands on the wrong side and disappears. */
  --tissue-fill:      #eef1ee;
  --tissue-fill-2:    #e4e9e5;

  /* ink */
  --tissue-ink:       #0d1a14;
  --tissue-ink-2:     #47554e;
  --tissue-ink-3:     #8a978f;

  /* lines and washes */
  --tissue-line:      rgba(15,30,25,.09);
  --tissue-line-2:    rgba(15,30,25,.15);
  --tissue-hover:     rgba(15,30,25,.045);

  /* brand green */
  --tissue-accent:       #00875f;
  --tissue-accent-br:    #00b57e;
  --tissue-accent-dp:    #006b4b;
  --tissue-accent-soft:  rgba(0,135,95,.08);
  --tissue-accent-wash:  rgba(0,135,95,.07);
  --tissue-accent-glow:  rgba(0,135,95,.18);
  --tissue-accent-halo:  rgba(0,181,126,.22);
  --tissue-on-accent:    #ffffff;

  /* the sticky header's glass: at rest, and once the page has scrolled */
  --tissue-glass:        rgba(244,246,244,.72);
  --tissue-glass-solid:  rgba(244,246,244,.92);

  /* Code blocks are dark on both themes: the dark plate is how a reader tells
     code from prose at a glance, and inverting it in dark mode removes the
     only cue. Inline code takes a tint of the page instead. */
  --tissue-code-bg:      #0d141c;
  --tissue-code-hd:      #080d14;
  --tissue-code-ink:     #c9d5e8;
  --tissue-code-bright:  #ffffff;
  --tissue-code-soft:    rgba(15,30,25,.05);
  --tissue-code-soft-br: rgba(15,30,25,.12);

  /* status */
  --tissue-danger:       #c0392b;
  --tissue-danger-soft:  rgba(192,57,43,.07);
  --tissue-danger-line:  rgba(192,57,43,.2);
  --tissue-amber:        #b7791f;

  /* type */
  --tissue-font-body:    "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --tissue-font-mono:    "JetBrains Mono", "Menlo", "Consolas", monospace;
  --tissue-font-display: "DM Serif Display", serif;

  /* metrics. --tissue-hdr-max is the width of the header's inner container and
     is the only thing that decides header alignment: the marketing default
     centres the bar on the same 1140px column the pages use, docs overrides it
     to `none` so the wordmark keeps its sidebar alignment. */
  --tissue-header-h:  58px;
  --tissue-hdr-max:   1140px;
  --tissue-shadow-xs: 0 1px 2px rgba(15,30,25,.05);
  --tissue-shadow-sm: 0 2px 8px rgba(15,30,25,.08);
  --tissue-shadow-lg: 0 12px 40px rgba(15,30,25,.14);
}

/* Dark. 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:        #0f1512;
  --tissue-bg-2:      #151d19;
  --tissue-bg-3:      #1c2621;
  --tissue-paper:     #171f1b;
  --tissue-panel:     #131a17;

  /* Lighter than paper, where the light values are darker than it. */
  --tissue-fill:      #26322c;
  --tissue-fill-2:    #2f3d37;

  --tissue-ink:       #e6ece8;
  --tissue-ink-2:     #a3b0a9;
  --tissue-ink-3:     #6f7d76;

  --tissue-line:      rgba(160,190,175,.12);
  --tissue-line-2:    rgba(160,190,175,.22);
  --tissue-hover:     rgba(200,225,212,.06);

  /* #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-accent-dp:    #00b57e;
  --tissue-accent-soft:  rgba(47,189,143,.13);
  --tissue-accent-wash:  rgba(47,189,143,.10);
  --tissue-accent-glow:  rgba(47,189,143,.25);
  --tissue-accent-halo:  rgba(79,216,168,.24);
  --tissue-on-accent:    #06231a;

  --tissue-glass:        rgba(15,21,18,.72);
  --tissue-glass-solid:  rgba(15,21,18,.92);

  --tissue-code-bg:      #0a0f0d;
  --tissue-code-hd:      #060a08;
  --tissue-code-soft:    rgba(200,225,212,.07);
  --tissue-code-soft-br: rgba(200,225,212,.16);

  --tissue-danger:       #e8796a;
  --tissue-danger-soft:  rgba(232,121,106,.10);
  --tissue-danger-line:  rgba(232,121,106,.28);
  --tissue-amber:        #d9a05b;

  --tissue-shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --tissue-shadow-sm: 0 2px 8px rgba(0,0,0,.45);
  --tissue-shadow-lg: 0 12px 40px rgba(0,0,0,.55);
}