:root {
  --ofm-petrol-900: #005362;
  --ofm-petrol-800: #006779;
  --ofm-petrol-700: #007d94;
  --ofm-petrol-500: #47a1b2;
  --ofm-petrol-200: #b3d8df;
  --ofm-petrol-100: #e0eff2;
  --ofm-purple-800: #4a438c;
  --ofm-purple-600: #605a9a;
  --ofm-purple-300: #afaccc;
  --ofm-accent: #54a5b4;
  --ofm-canvas: #f3f6f7;
  --ofm-surface: #ffffff;
  --ofm-surface-muted: #fafbfc;
  --ofm-text: #17272e;
  --ofm-text-muted: #61737c;
  --ofm-border: #dbe4e7;
  --ofm-border-strong: #c0cacd;
  --ofm-success: #237a43;
  --ofm-warning: #9a6500;
  --ofm-danger: #b33b3b;
  --ofm-info: #2a6e9a;
  --ofm-primary-contrast: #ffffff;
  --ofm-sidebar-start: #064f5e;
  --ofm-sidebar-end: #4a438c;
  --ofm-sidebar-contrast: #ffffff;
  --ofm-radius-xs: 6px;
  --ofm-radius-sm: 9px;
  --ofm-radius-md: 14px;
  --ofm-radius-lg: 20px;
  --ofm-shadow-sm: 0 1px 2px rgba(18,42,52,.04),0 3px 10px rgba(18,42,52,.04);
  --ofm-shadow-md: 0 10px 30px rgba(18,42,52,.08);
  --ofm-shadow-lg: 0 24px 64px rgba(18,42,52,.16);
  --ofm-space-2: 8px;
  --ofm-space-3: 12px;
  --ofm-space-4: 16px;
  --ofm-space-5: 20px;
  --ofm-space-6: 24px;
}

.app-sidebar,
.portfolio-sidebar {
  background: linear-gradient(180deg, var(--ofm-sidebar-start) 0%, #214a70 62%, var(--ofm-sidebar-end) 145%);
  color: var(--ofm-sidebar-contrast);
}

.button:not(.button--secondary):not(.button--danger):not(.button--light),
.topbar-button--primary {
  background: var(--ofm-petrol-700);
  border-color: var(--ofm-petrol-700);
  color: var(--ofm-primary-contrast);
}

body { background: var(--ofm-canvas); color: var(--ofm-text); }
.panel, .card, .dashboard-stat, .portfolio-category-card { border-radius: var(--ofm-radius-md); }