/* ──────────────────────────────────────────────────────────────
   MIND ID · Portfolio Management Office — design tokens (v2, LIGHT terminal)
   Direction: a MINING terminal, board-grade & light (matches the sample packs).
   IBM Plex Sans + Plex Mono (institutional-technical). MIND ID red reserved
   for alerts/action only. Indigo = the AI/copilot layer.
   Signature: colour-by-metal — copper, nickel-steel, tin, coal, gold, aluminium.
   Not soft, not pastel: hairline rules, tight grid, tabular mono figures.
   ────────────────────────────────────────────────────────────── */
:root {
  /* surfaces — all white, separated by hairlines + soft shadow */
  --canvas:  #FFFFFF;
  --canvas-2:#FFFFFF;
  --panel:   #FFFFFF;
  --panel-2: #F3F6FB;   /* insets / active nav / table headers */
  --panel-3: #F8FAFD;

  --line:   rgba(16,32,60,0.09);
  --line-2: rgba(16,32,60,0.15);

  /* ink — deep navy graphite */
  --ink:       #101B33;
  --ink-2:     #43506A;
  --ink-3:     #78849B;
  --ink-faint: #AAB3C4;

  /* MIND ID red — SIGNAL ONLY (alert / action / cut-loss) */
  --brand-red: #E4002B;
  --red:       #DA0027;
  --red-soft:  rgba(218,0,39,0.09);

  /* AI / copilot / interactive layer — indigo */
  --iris:      #3F63E0;
  --iris-2:    #2E4FC7;
  --iris-soft: rgba(63,99,224,0.10);

  /* status — saturated enough to read on white, still disciplined */
  --ok:   #12924B;  --ok-soft:  rgba(18,146,75,0.10);
  --warn: #B37211;  --warn-soft: rgba(179,114,17,0.11);
  --bad:  #DA0027;  --bad-soft: rgba(218,0,39,0.09);

  /* SIGNATURE — metal palette (grounds the system in the ore) */
  --m-copper: #B4652F;
  --m-nickel: #3E76A6;
  --m-tin:    #6E7A8C;
  --m-coal:   #3D4657;
  --m-gold:   #B0801F;
  --m-alu:    #5E7690;

  --r-lg: 9px; --r-md: 6px; --r-sm: 4px; --r-pill: 9999px;

  --font-sans: "Plus Jakarta Sans", "SF Pro Display", system-ui, sans-serif;
  --font-mono: "Plus Jakarta Sans", "SF Pro Display", system-ui, sans-serif;

  --shadow-card: 0 1px 2px rgba(16,32,60,0.04), 0 1px 3px rgba(16,32,60,0.05);
  --shadow-pop:  0 16px 44px rgba(16,32,60,0.16);

  --duration: 190ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --sidebar-w: 224px;
  --copilot-w: 356px;
  --topbar-h: 50px;
}

/* backward-compat aliases (older view modules reference these names) */
:root {
  --accent: var(--brand-red); --accent-2: var(--red); --accent-soft: var(--red-soft); --accent-ink: #fff;
  --brand: var(--ink); --brand-2: var(--ink); --brand-text: var(--iris-2); --brand-soft: var(--iris-soft);
  --surface: var(--panel); --surface-2: var(--panel-3); --surface-3: var(--panel-2);
  --border: var(--line); --border-strong: var(--line-2);
  --ok-bg: var(--ok-soft); --ok-fg: var(--ok); --ok-dot: var(--ok);
  --warn-bg: var(--warn-soft); --warn-fg: var(--warn); --warn-dot: var(--warn);
  --bad-bg: var(--bad-soft); --bad-fg: var(--bad); --bad-dot: var(--bad);
  --info-bg: var(--iris-soft); --info-fg: var(--iris);
  --slate: var(--ink-2); --slate-soft: var(--panel-3);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--canvas);
  font-size: 13.5px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button { font-family: inherit; color: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; color: var(--ink); }
a { color: inherit; text-decoration: none; }
::selection { background: var(--iris-soft); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(16,32,60,0.16); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(16,32,60,0.28); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* Utility ---------------------------------------------------- */
.mono { font-feature-settings: "tnum" 1, "zero" 1; letter-spacing: 0; }
.eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-3);
}
.muted { color: var(--ink-3); }
.pos { color: var(--ok); }
.neg { color: var(--red); }

/* Status tags — flat, low-alpha fill ------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap;
  letter-spacing: 0.01em;
}
.tag .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.tag.ok   { background: var(--ok-soft);   color: var(--ok); }
.tag.ok .dot { background: var(--ok); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.warn .dot { background: var(--warn); }
.tag.bad  { background: var(--bad-soft);  color: var(--bad); }
.tag.bad .dot { background: var(--bad); }