/* Design tokens — from docs/ui-design-system.md §3 + v1.1 patch */
:root {
  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", "Liberation Mono", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --leading-tight: 1.25; --leading-normal: 1.5;
  --ls-wide: 0.04em;

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem;

  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-full: 9999px;

  --shell-sidebar-width: 240px;
  --shell-topbar-height: 48px;
  --content-max-width: 1440px;

  --duration-fast: 120ms; --duration-normal: 200ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  --z-dropdown: 100; --z-overlay: 300; --z-modal: 400; --z-toast: 500;
}

[data-theme="light"] {
  --color-primary: #1a4d6d;
  --color-primary-hover: #153f5a;
  --color-primary-active: #0f2f44;
  --color-primary-subtle: #e8f1f6;
  --color-primary-text: #ffffff;

  --color-secondary: #4a5f6b;
  --color-secondary-subtle: #eef2f4;

  --color-accent: #2d6a4f;
  --color-accent-subtle: #e9f5ef;

  --color-bg-base: #f4f6f8;
  --color-bg-surface: #ffffff;
  --color-bg-elevated: #ffffff;
  --color-bg-muted: #e8ecef;
  --color-bg-inset: #f0f2f4;

  --color-border: #c5cdd3;
  --color-border-strong: #9aa8b3;
  --color-border-subtle: #e2e7eb;

  --color-text-primary: #1a2329;
  --color-text-secondary: #4a5f6b;
  --color-text-tertiary: #6b7c88;
  --color-text-disabled: #9aa8b3;
  --color-text-inverse: #ffffff;

  --color-success: #1f6b45; --color-success-bg: #e6f4ec; --color-success-border: #8fc9a8;
  --color-warning: #8a6116; --color-warning-bg: #faf3e3; --color-warning-border: #e0c078;
  --color-error: #9b2332;  --color-error-bg: #fcebec;  --color-error-border: #e8a0a8;
  --color-info: #1a4d6d;   --color-info-bg: #e8f1f6;   --color-info-border: #8eb4cc;

  --color-focus-ring: #1a4d6d;

  --health-unknown: #6b7c88; --health-unknown-bg: #eef2f4;
  --health-alive: #1f6b45;   --health-alive-bg: #e6f4ec;
  --health-suspect: #8a6116; --health-suspect-bg: #faf3e3;
  --health-dead: #9b2332;    --health-dead-bg: #fcebec;
  --health-offline: #4a5f6b; --health-offline-bg: #e8ecef;

  --role-producer: #1a4d6d; --role-producer-bg: #e8f1f6;
  --role-consumer: #2d6a4f; --role-consumer-bg: #e9f5ef;

  --shadow-sm: 0 1px 2px rgba(26, 35, 41, 0.06);
  --shadow-md: 0 4px 12px rgba(26, 35, 41, 0.08);
  --shadow-lg: 0 8px 24px rgba(26, 35, 41, 0.12);
}

[data-theme="dark"] {
  --color-primary: #5ba4cc;
  --color-primary-hover: #7ab8d9;
  --color-primary-active: #4a8fb3;
  --color-primary-subtle: #1a2f3d;
  --color-primary-text: #0d1419;

  --color-secondary: #8a9baa;
  --color-secondary-subtle: #1e2830;

  --color-accent: #52b788;
  --color-accent-subtle: #1a2e24;

  --color-bg-base: #0d1419;
  --color-bg-surface: #151d24;
  --color-bg-elevated: #1a2329;
  --color-bg-muted: #1e2830;
  --color-bg-inset: #0a0f13;

  --color-border: #2d3a44;
  --color-border-strong: #4a5f6b;
  --color-border-subtle: #1e2830;

  --color-text-primary: #e8ecef;
  --color-text-secondary: #a3b2bf;
  --color-text-tertiary: #6b7c88;
  --color-text-disabled: #4a5f6b;
  --color-text-inverse: #0d1419;

  --color-success: #52b788; --color-success-bg: #1a2e24; --color-success-border: #2d6a4f;
  --color-warning: #d4a843; --color-warning-bg: #2a2418; --color-warning-border: #8a6116;
  --color-error: #e07a86;   --color-error-bg: #2a181c;   --color-error-border: #9b2332;
  --color-info: #5ba4cc;    --color-info-bg: #1a2f3d;    --color-info-border: #1a4d6d;

  --color-focus-ring: #5ba4cc;

  --health-unknown: #6b7c88; --health-unknown-bg: #1e2830;
  --health-alive: #52b788;   --health-alive-bg: #1a2e24;
  --health-suspect: #d4a843; --health-suspect-bg: #2a2418;
  --health-dead: #e07a86;    --health-dead-bg: #2a181c;
  --health-offline: #8a9baa; --health-offline-bg: #1e2830;

  --role-producer: #5ba4cc; --role-producer-bg: #1a2f3d;
  --role-consumer: #52b788; --role-consumer-bg: #1a2e24;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}