/**
 * Pipeline Intelligence marketing — shared color tokens.
 * Primary: teal. Secondary splash: blue. Semantic: red (risk), amber (watch).
 */
:root {
  --pi-bg: #0a0c10;
  --pi-surface: #111418;
  --pi-recess: #0d1013;
  --pi-border: rgba(255, 255, 255, 0.08);
  --pi-border-strong: rgba(255, 255, 255, 0.12);

  --pi-text: #f2f4f2;
  --pi-text-bright: #f5f7f5;
  --pi-muted: #94a3b8;
  --pi-dim: #64748b;

  --pi-accent: #2dd4bf;
  --pi-accent-light: #5eead4;
  --pi-accent-dark: #04140f;
  --pi-accent-bg: rgba(45, 212, 191, 0.08);
  --pi-accent-border: rgba(45, 212, 191, 0.22);
  --pi-accent-glow: rgba(45, 212, 191, 0.32);

  --pi-blue: #60a5fa;
  --pi-blue-light: #93c5fd;
  --pi-blue-bg: rgba(96, 165, 250, 0.1);
  --pi-blue-border: rgba(96, 165, 250, 0.25);

  --pi-risk: #f87171;
  --pi-risk-bg: rgba(248, 113, 113, 0.12);
  --pi-risk-border: rgba(248, 113, 113, 0.28);

  --pi-watch: #fbbf24;
  --pi-watch-bg: rgba(251, 191, 36, 0.12);

  --pi-content-width: 1100px;
}