/* VIBEMAIL — "Blackletter & Ember" token sheet (CONTRACTS.md §2).
   Every Vibemail surface consumes ONLY these variables.

   Material logic (founder decision 2026-07-20):
   - The ROOM is light by default — warm paper-adjacent surfaces for business operators.
   - The TERMINAL is a material, not a theme: always graphite (--ve-term-*), a window
     into the engine room, inset in the light room.
   - PAPER (--ve-paper) stays reserved exclusively for rendered letters + booking page.
   - Dark room remains available via :root[data-theme="dark"]. */

:root {
  /* Surfaces — the light room (warm, never sterile white) */
  --ve-bg:            #F1EEE7;
  --ve-surface:       #FAF8F3;
  --ve-surface-2:     #FFFFFF;
  --ve-border:        rgba(28,27,24,0.10);
  --ve-border-subtle: rgba(28,27,24,0.05);
  /* Ink — warm dark ink on light surfaces */
  --ve-ink:           #1C1B18;
  --ve-ink-2:         #55534C;
  --ve-ink-3:         #8E8C84;
  /* Signals — theme-invariant */
  --ve-ember:         #FF4D00;   /* hot: live sends, REVIEW, CTAs, interested replies */
  --ve-ember-dim:     rgba(255,77,0,0.10);
  --ve-ember-ink:     #FFF7F2;   /* text set ON ember (CTA labels) — theme-invariant */
  --ve-phosphor:      #1E9E5C;   /* completed receipts only (darkened for light surfaces) */
  --ve-warn:          #8A6410;
  --ve-danger:        #C93A3F;
  /* Paper — reserved EXCLUSIVELY for rendered letters + booking page */
  --ve-paper:         #F6F3EC;
  --ve-paper-ink:     #1C1B18;
  /* Agent-role tags on ROOM surfaces (worker chips) — darkened for legibility */
  --ve-role-researcher:     #2563C9;
  --ve-role-scout:          #0E7E8C;
  --ve-role-strategist:     #8A6410;
  --ve-role-copywriter:     #B34A7A;
  --ve-role-prospector:     #3E7D14;
  --ve-role-deliverability: #4E6076;
  /* Terminal material — ALWAYS graphite, in every theme */
  --ve-term-bg:       #0B0C0E;
  --ve-term-surface:  #131519;
  --ve-term-border:   rgba(232,230,225,0.10);
  --ve-term-ink:      #E8E6E1;
  --ve-term-ink-2:    #A8A69F;
  --ve-term-ink-3:    #6E6D67;
  --ve-term-phosphor: #2FBF71;
  --ve-term-warn:     #E3B341;
  --ve-term-danger:   #E5484D;
  /* Role tags INSIDE the terminal — bright, on graphite */
  --ve-term-role-researcher:     #6EA8FE;
  --ve-term-role-scout:          #38C6D9;
  --ve-term-role-strategist:     #E3B341;
  --ve-term-role-copywriter:     #E58FB3;
  --ve-term-role-prospector:     #9BE36B;
  --ve-term-role-deliverability: #94A3B8;
  /* Type — the machine (mono) writes letters (serif) */
  --ve-font-mono:  'JetBrains Mono', ui-monospace, monospace;      /* everything the machine does */
  --ve-font-ui:    'Space Grotesk', system-ui, sans-serif;         /* UI chrome */
  --ve-font-serif: 'Newsreader', Georgia, serif;                   /* rendered letters, theses, taglines */
  /* Motion — mechanical, no bounce */
  --ve-t-fast:   120ms cubic-bezier(0.2, 0, 0, 1);
  --ve-t-move:   180ms cubic-bezier(0.2, 0, 0, 1);
  /* Radii / misc */
  --ve-r-sm: 4px;  --ve-r-md: 8px;
  --ve-caret: var(--ve-ember);   /* the blinking block caret ▮ = real work happening */
}

/* Dark room — the graphite theme, for the developers-at-heart.
   Ember, paper, and the terminal material are theme-invariant. */
:root[data-theme="dark"] {
  --ve-bg:            #0B0C0E;
  --ve-surface:       #131519;
  --ve-surface-2:     #1A1D22;
  --ve-border:        rgba(232,230,225,0.07);
  --ve-border-subtle: rgba(232,230,225,0.04);
  --ve-ink:           #E8E6E1;
  --ve-ink-2:         #A8A69F;
  --ve-ink-3:         #6E6D67;
  --ve-ember-dim:     rgba(255,77,0,0.12);
  --ve-phosphor:      #2FBF71;
  --ve-warn:          #E3B341;
  --ve-danger:        #E5484D;
  /* Bright role tags read fine on dark room surfaces */
  --ve-role-researcher:     #6EA8FE;
  --ve-role-scout:          #38C6D9;
  --ve-role-strategist:     #E3B341;
  --ve-role-copywriter:     #E58FB3;
  --ve-role-prospector:     #9BE36B;
  --ve-role-deliverability: #94A3B8;
}

/* ---- Base reset ---- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ve-bg);
  color: var(--ve-ink);
  font-family: var(--ve-font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }

button, input, textarea, select { font: inherit; color: inherit; }

/* ---- Type utilities ---- */

.ve-mono  { font-family: var(--ve-font-mono); }
.ve-serif { font-family: var(--ve-font-serif); }
.ve-ui    { font-family: var(--ve-font-ui); }

/* ---- The caret ▮ — real work happening here ---- */

@keyframes ve-caret-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.ve-caret::after {
  content: "▮";
  color: var(--ve-caret);
  font-family: var(--ve-font-mono);
  animation: ve-caret-blink 1s step-end infinite;
}

/* ---- Terminal material ----
   Apply .ve-term-material to any container that is a window into the engine room:
   always graphite, regardless of room theme. */

.ve-term-material {
  background: var(--ve-term-bg);
  border: 1px solid var(--ve-term-border);
  color: var(--ve-term-ink-2);
}

/* ---- Terminal lines ----
   One line per real backend event: <div class="ve-term-line ve-term-line--fetch">
   <span class="ve-term-tag ve-term-tag--scout">[scout]</span> ...</div>
   Terminal lines always sit on the graphite material — term tokens only. */

.ve-term-line {
  font-family: var(--ve-font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ve-term-ink-2);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* Action kinds — quiet ink; reasoning and writing read a shade brighter */
.ve-term-line--fetch  { color: var(--ve-term-ink-2); }
.ve-term-line--parse  { color: var(--ve-term-ink-2); }
.ve-term-line--query  { color: var(--ve-term-ink-2); }
.ve-term-line--verify { color: var(--ve-term-ink-2); }
.ve-term-line--reason { color: var(--ve-term-ink); }
.ve-term-line--write  { color: var(--ve-term-ink); }

/* Status kinds */
.ve-term-line--ok   { color: var(--ve-term-phosphor); }
.ve-term-line--warn { color: var(--ve-term-warn); }
.ve-term-line--skip { color: var(--ve-term-ink-3); text-decoration: line-through; }

/* Role stream tags — bright on graphite */
.ve-term-tag {
  font-family: var(--ve-font-mono);
  user-select: none;
}
.ve-term-tag--researcher     { color: var(--ve-term-role-researcher); }
.ve-term-tag--scout          { color: var(--ve-term-role-scout); }
.ve-term-tag--strategist     { color: var(--ve-term-role-strategist); }
.ve-term-tag--copywriter     { color: var(--ve-term-role-copywriter); }
.ve-term-tag--prospector     { color: var(--ve-term-role-prospector); }
.ve-term-tag--deliverability { color: var(--ve-term-role-deliverability); }
.ve-term-tag--system         { color: var(--ve-term-ink-3); }