/* v5 Phase 4 — design tokens (sealed colour palette).
 *
 * Match the v3 visual contract in docs/v3-ui/*.png.  All other CSS
 * imports this file; do not introduce hex literals elsewhere — pull a
 * variable, or add one here first if a missing semantic colour comes
 * up.
 */

:root {
  /* ── Surfaces ─────────────────────────────────────────────────── */
  --bg:           #0a0e17;
  --panel:        #131722;
  --header:       #1a1f2e;
  --border:       #1e2738;
  --border-soft:  #0f1420;        /* subtle row separators in tables */
  --highlight:    rgba(255, 149, 0, 0.05);

  /* ── Text ─────────────────────────────────────────────────────── */
  --text:         #d1d4dc;
  --muted:        #787b86;
  --dim:          #4a4e59;
  --white:        #e8eaed;

  /* ── Sentiment / accents ──────────────────────────────────────── */
  --up:           #26a69a;        /* positive PnL, BUY, QUALIFIED */
  --down:         #ef5350;        /* negative PnL, SELL, Below T1 */
  --tentative:    #ff9500;        /* amber — section headers, BALANCE label,
                                     active tabs, tentative rows           */
  --tentative-soft: rgba(255, 149, 0, 0.08);
  --tentative-dim:  #b36a00;

  /* ── Banners ──────────────────────────────────────────────────── */
  --warn-bg:      #5a1818;
  --warn-border:  #882828;

  /* ── Tier badges ─────────────────────────────────── */
  --tier-up:      #26a69a;
  --tier-down:    #ef5350;
  --tier-blue:    #2962ff;

  /* ── Strategy / rebalance accents (phase4-spec.md tokens) ───── */
  --accent-strategy:  #26a69a;
  --accent-rebalance: #5a6577;

  /* ── Category badge palette ─────────────────────────── */
  --cat-strategy: #26a69a;
  --cat-intervention: #ff9500;
  --cat-rebalance: #5a6577;

  /* ── Typography ───────────────────────────────────────────────── */
  --font-mono:    "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
  --fs-base:      12px;
  --fs-sm:        10px;
  --fs-xs:         9px;

  /* ── Radii / strokes ──────────────────────────────────────────── */
  --radius:       2px;
  --hairline:     1px solid var(--border);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  line-height: 1.4;
  min-height: 100vh;
}

/* Sentiment helpers — used inline throughout the render functions. */
.up      { color: var(--up); }
.down    { color: var(--down); }
.muted   { color: var(--muted); }
.dim     { color: var(--dim); }
.amber   { color: var(--tentative); }

/* The v3 amber section label: caps + thin border-bottom line.
 * Used as a flex container so a right-aligned `.section-right` can
 * sit on the same baseline (e.g. "Week of YYYY-MM-DD"). */
.section-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: var(--tentative);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 12px 3px;
  border-bottom: var(--hairline);
}
.section-label .section-right {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* No shadows, no gradients — Bloomberg-terminal aesthetic. */
* { box-shadow: none !important; }