/* Contexta brand tokens v0.2 (2026-07-10, colder execution after founder review)
   v0.1 warm-paper read as print/antique on screen; same trust register, modern fintech execution.
   Source of truth for rationale: wiki/products/contexta/brand.md
   Laws: green means money and nothing else · color is information ·
         the engine surface may glow, the UI never does. */

:root {
  /* surfaces: cool porcelain, not cream */
  --ctx-canvas: #f6f7f9;         /* app/page background */
  --ctx-sheet: #ffffff;          /* cards, raised surfaces */
  --ctx-ink: #0c1626;            /* cold navy-black, THE brand color */
  --ctx-ink-soft: #4a5568;       /* secondary text */
  --ctx-ink-faint: #8b94a3;      /* tertiary text, micro-labels */
  --ctx-hairline: #e4e7ec;       /* rules and borders */
  --ctx-accent: #155dfc;         /* interactive: links, focus, toggles */

  /* semantics */
  --ctx-money: #059669;          /* match found, deal closed, revenue */
  --ctx-money-deep: #047857;     /* money text on white when small */
  --ctx-money-bg: #d1fae5;
  --ctx-attn: #d97706;           /* going cold, follow-up due (icon + label) */
  --ctx-attn-bg: #fef3c7;

  /* data layer, light surfaces (validated: CVD/chroma/contrast on #fff) */
  --ctx-demand: #ea580c;         /* graph demand-side intents */
  --ctx-supply: #155dfc;         /* graph supply-side intents (shares accent hue) */
  /* revenue ramp, one hue light->dark, magnitude only */
  --ctx-ramp-1: #d1fae5;
  --ctx-ramp-2: #6ee7b7;
  --ctx-ramp-3: #34d399;
  --ctx-ramp-4: #059669;
  --ctx-ramp-5: #047857;

  /* the hub (graph): SAME light canvas as the rest of the UI. meaning via colored rings on
     ink nodes (--ctx-demand / --ctx-supply / --ctx-attn) + green match edge; subtle float
     motion; hover reveals the dossier. (dark-glow engine tried and dropped 2026-07-10.) */
  --ctx-node: #2a3548;           /* soft ink node fill */
  --ctx-edge: #d9dfe8;           /* structural edges */

  /* type: Space Grotesk display + numbers, Inter body, Plex Mono micro-labels only */
  --ctx-font-display: "Space Grotesk", Inter, "Helvetica Neue", sans-serif;
  --ctx-font-sans: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ctx-font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;

  /* structure */
  --ctx-radius-sheet: 10px;
  --ctx-radius-control: 6px;
  --ctx-border: 1px solid var(--ctx-hairline);
}

/* usage invariants (enforced by review, not CSS):
   - big numbers wear Space Grotesk + tabular-nums; mono is for micro-labels, never headline figures
   - glow/gradients allowed ONLY on the engine (graph) surface; UI and marketing stay flat
   - no purple, no emoji on product surfaces */