/*
 * Design tokens, lifted verbatim from the DeVenture Pipeline Map and the
 * UI mockups. The stage ramp s0-s5 is the spine of the whole visual language:
 * it is the progress meter on a card, the node on the stepper, the bar in a
 * chart and the left border of a panel.
 */
:root {
  /* surfaces and ink */
  --ink: #161C24;
  --paper: #EAEEF1;
  --surface: #FFFFFF;
  --line: #D6DDE3;
  --line-soft: #EAEEF1;
  --line-dash: #C6D0D8;
  --muted: #5C6B78;
  --faint: #AEB9C2;
  --box: #B8C2CB;

  /* stage ramp */
  --s0: #64748B;
  --s1: #3E7CB1;
  --s2: #1C9E93;
  --s3: #2FA65B;
  --s4: #8AA82E;
  --s5: #D99B1E;

  /* semantic */
  --accent: #1C9E93;
  --ok: #2FA65B;
  --ok-bg: #E7F5EC;
  --ok-ink: #1F7A42;
  --warn: #D99B1E;
  --warn-bg: #FDF4E3;
  --warn-line: #EBD8AE;
  --warn-ink: #8A6110;
  --kill: #B23325;
  --kill-bg: #FBEEEC;
  --kill-line: #E9CDC8;
  --kill-ink: #7A271B;
  --kill-soft: #E28B7F;
  --kill-pale: #F3C9C3;

  /* lanes from the map poster */
  --doc-lane: #F3F7FA;
  --tool-lane: #F8F5EF;

  /* role badges */
  --badge-blue-bg: #EAF1F7;
  --badge-blue-ink: #2C5C86;
  --badge-amber-bg: #FBF2E0;
  --badge-amber-ink: #8A6210;
  --badge-grey-bg: #EFF2F4;
  --badge-grey-ink: #4A5A67;

  /* on the dark card */
  --on-dark: rgba(255, 255, 255, .6);
  --on-dark-dim: rgba(255, 255, 255, .45);
  --on-dark-line: rgba(255, 255, 255, .14);
  --mint: #7FD4C7;
  --up: #7ED9A0;

  /* type */
  --display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --text: Inter, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;

  /* shape */
  --r-card: 10px;
  --r-panel: 12px;
  --r-input: 8px;
  --r-chip: 7px;
  --r-pill: 20px;

  --shadow-card: 0 2px 5px -3px rgba(20, 30, 45, .4);
  --shadow-frame: 0 24px 60px -34px rgba(20, 30, 45, .4);
  --shadow-modal: 0 40px 80px -30px rgba(20, 30, 45, .6);

  --topbar-h: 56px;
  --page-max: 1440px;
  --page-pad: 24px;
}

.stage-0 { --stage: var(--s0); }
.stage-1 { --stage: var(--s1); }
.stage-2 { --stage: var(--s2); }
.stage-3 { --stage: var(--s3); }
.stage-4 { --stage: var(--s4); }
.stage-5 { --stage: var(--s5); }

@media (max-width: 720px) {
  :root { --page-pad: 14px; }
}