/* The token bridge.
   ------------------------------------------------------------------------
   The Sales Pipeline views were merged in from a standalone app and brought
   their own palette with them (sales_pipeline/static/css/style.css). Two
   palettes in one product means two slightly different whites, two grays and
   two golds - which the eye reads instantly as "these are two programs".

   Rather than editing several hundred rules over there, this file re-points
   that stylesheet's tokens at the design system's own. One palette, one
   dark mode, one radius, one type size - and the pipeline keeps every rule
   it already had.

   Loaded AFTER both stylesheets (see templates/base.html), so it wins.
   ------------------------------------------------------------------------ */
.sp-scope {
  --brand-navy: var(--navy);
  --brand-navy-dark: var(--navy);
  --brand-gold: var(--gold);
  --brand-gold-light: var(--gold-light);

  --surface-1: var(--bg);
  --surface-2: var(--bg);
  --surface-card: var(--card);

  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-muted: var(--muted);

  /* Same-named tokens (--border, --radius, --font) go through the
     :root aliases: `--border: var(--border)` here is a cycle, and a
     cycle computes to invalid, which took the border off every control
     in these views. */
  --gridline: var(--ds-border);
  --border: var(--ds-border);
  --baseline: var(--ds-border-strong);

  --good: var(--green);
  --critical: var(--red);
  --warn-ink: var(--amber);

  --radius: var(--ds-radius);
  --font: var(--ds-font);

  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
}

/* The pipeline's own buttons and cards, brought onto the same geometry as
   the rest of the app - same height, same corner, same weight. */
.sp-scope .btn {
  border-radius: 11px;
  font-weight: 680;
  font-size: 13.5px;
  box-shadow: var(--shadow-xs);
}
.sp-scope .card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  background: linear-gradient(155deg, color-mix(in srgb, var(--card) 97%, var(--accent-soft)), var(--card) 45%);
}
.sp-scope select, .sp-scope input, .sp-scope textarea {
  border-radius: 12px;
  border-color: var(--border-strong);
  font-size: 13.5px;
}
/* Its filter selects stretched the full width of the page because they had
   no width of their own to fall back on. */
.sp-scope .filters select, .sp-scope .toolbar select { max-width: 260px; }