/* Epistery Console — design tokens.
 *
 * The palette philosophy (Michael): the chrome is a STEEL-TINTED-BLUE neutral —
 * near-invisible structure — so the logo's true colors (green + rust) are what
 * stand out. Blue is not the brand; green/rust are the brand voices that pop.
 *
 * Semantic app tokens are built FROM the primitives below, and the componentry
 * elements (Toast, Popup, saveButton) consume the semantic vars — so restyling
 * is a token change, never a hunt through component css. */

:root {
  /* ── brand primitives (mirror @epistery/art) ── */
  --epistery-green-deep:  #2d5016;
  --epistery-green-mid:   #4a7c59;
  --epistery-green-light: #6a9a6d;
  --epistery-rust-deep:   #8b6f65;
  --epistery-rust-mid:    #b08878;
  --epistery-rust-light:  #c9a89a;
  --epistery-cream:       #fffffe;

  /* ── steel neutrals (blue-tinted grays — the chrome) ── */
  --steel-50:  #f5f7f9;
  --steel-100: #e9eef2;
  --steel-200: #d6dee4;
  --steel-300: #bac6ce;
  --steel-500: #6d7b86;
  --steel-700: #3c474f;
  --steel-900: #1b2228;

  /* ── semantic surfaces & text ── */
  --page-bg:      var(--steel-50);      /* the app ground */
  --bg-color:     #ffffff;              /* cards, surfaces, toast body */
  --tray-bg:      var(--steel-100);     /* sidebar / tray / modal shim */
  --page-border:  var(--steel-200);
  --text-color:   var(--steel-900);
  --text-muted:   var(--steel-500);

  /* ── brand pops ── */
  --primary:          var(--epistery-green-deep);   /* active nav, links, primary */
  --primary-mid:      var(--epistery-green-mid);
  --primary-contrast: #ffffff;
  --accent:           var(--epistery-rust-mid);     /* rust accent */
  --page-action:      #e4efdd;                       /* light-green action tint (dark text reads) */

  /* ── status ── */
  --status-warning: #b7791f;
  --status-error:   #c0392b;
  --status-success: var(--epistery-green-mid);

  /* ── spacing scale (componentry uses these) ── */
  --spacerhalf: 4px;
  --spacer:     8px;
  --spacer2:    16px;
  --spacer3:    24px;

  /* ── layers & metrics ── */
  --z-index-toast: 2000;
  --sidebar-width: 264px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-color);
  background: var(--page-bg);
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Identicon tiles — the ONE common style for generated address avatars: a
   little rounding (not a circle) plus a hairline border, which is what gives the
   generated pattern its finish and makes it read as a tile. Matches the
   message-board post avatar (.mb-avatar). Callers set width/height; the 15%
   radius keeps the rounding proportional at every size. */
.identicon { border-radius: 15%; border: 1px solid var(--page-border); flex-shrink: 0; }

/* Any displayed address / code / QR that copies itself on click (see
   copyable.mjs). One affordance so click-to-copy looks the same everywhere. */
.copyable { cursor: pointer; }
.copyable:hover { color: var(--primary); }

/* Origin breadcrumb ("rootz›") shown before a session's name when it's hosted by
   another contract (originLabel.mjs). Muted + normal weight everywhere it appears
   — the sidebar switcher, feed cards, and the session header — so the session's
   own name stays the emphasis. One rule; the components don't restyle it. */
.origin { color: var(--text-muted); font-weight: 400; }