:root {
  /* ── Backgrounds ─────────────────────────────── */
  --bg-app:          #1a1a1a;
  --bg-canvas:       #ebebeb;   /* ← Miro-style light grey */
  --bg-toolbar:      #111111;
  --bg-panel:        #161616;
  --bg-panel-section: rgba(255,255,255,0.04);
  --bg-overlay:      rgba(0,0,0,0.80);

  /* ── Text ────────────────────────────────────── */
  --text-primary:   #f0f0f0;
  --text-secondary: #8a8a8a;
  --text-tertiary:  #707070;
  --text-muted:     #555555;

  /* Text on light canvas */
  --canvas-text-primary:   #1a1a1a;
  --canvas-text-secondary: #555555;
  --canvas-text-muted:     #999999;

  /* ── Borders ──────────────────────────────────── */
  --border-subtle: rgba(255,255,255,0.07);
  --border-medium: rgba(255,255,255,0.14);
  --border-strong: rgba(255,255,255,0.28);

  /* ── Accent (monochrome) ─────────────────────── */
  --accent:         #ffffff;
  --accent-light:   #d0d0d0;
  --accent-bg:      rgba(255,255,255,0.08);
  --accent-bg-hover:rgba(255,255,255,0.14);

  /* ── Functional highlight colors ─────────────── */
  --color-upstream:   #16a34a;
  --color-downstream: #ea580c;
  --color-flow:       #d97706;
  --color-selected:   #ffffff;
  --color-dimmed:     0.18;

  /* ── Phase section (on light canvas) ─────────── */
  --phase-bg:            rgba(255,255,255,0.52);
  --phase-border:        rgba(0,0,0,0.07);
  --phase-label-bg:      #ebebeb;
  --phase-label-color:   #999999;

  /* ── Card geometry ───────────────────────────── */
  --card-w:     270px;
  --card-h:     108px;
  --card-radius:  8px;

  /* ── Grid ────────────────────────────────────── */
  --col-w: 330px;
  --row-h: 152px;
  --pad-x:  64px;
  --pad-y:  88px;

  /* ── Typography ───────────────────────────────── */
  --font-ui:   -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* ── Transitions ──────────────────────────────── */
  --t-fast:   0.12s ease;
  --t-normal: 0.20s ease;

  /* ── Shadows ──────────────────────────────────── */
  --shadow-card:  0 2px 8px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.12);
  --shadow-panel: -2px 0 24px rgba(0,0,0,0.5);
  --shadow-modal: 0 8px 48px rgba(0,0,0,0.7);

  /* ── Domain colors (card backgrounds) ───────── */
  --domain-governance:   #374151;
  --domain-scope:        #1d4ed8;
  --domain-schedule:     #0e7490;
  --domain-finance:      #15803d;
  --domain-stakeholders: #9d174d;
  --domain-resources:    #c2410c;
  --domain-risk:         #a16207;

  /* Domain lighter shade (for ID/label text) */
  --domain-governance-a:   #9ca3af;
  --domain-scope-a:        #93c5fd;
  --domain-schedule-a:     #67e8f9;
  --domain-finance-a:      #86efac;
  --domain-stakeholders-a: #fbcfe8;
  --domain-resources-a:    #fdba74;
  --domain-risk-a:         #fde68a;
}