.mcp-app {
  color-scheme: light;

  --mcp-color-bg-canvas: #f6f8fb;
  --mcp-color-bg-surface: #ffffff;
  --mcp-color-bg-subtle: #f8fbff;
  --mcp-color-bg-hover: #f5f9ff;
  --mcp-color-bg-selected: #eef6ff;
  --mcp-color-overlay: rgb(15 23 42 / 55%);

  --mcp-color-text: #172033;
  --mcp-color-text-strong: #0f172a;
  --mcp-color-text-muted: #64748b;
  --mcp-color-text-disabled: #94a3b8;
  --mcp-color-text-on-action: #ffffff;

  --mcp-color-border: #d8e1ef;
  --mcp-color-border-subtle: #e2e8f0;
  --mcp-color-border-strong: #b9c9dd;

  --mcp-color-action-primary: #0d6efd;
  --mcp-color-action-primary-hover: #0b5ed7;
  --mcp-color-link: #164e8b;
  --mcp-color-data-accent: #2b6fe8;
  --mcp-color-focus-ring: rgb(13 110 253 / 20%);

  --mcp-color-success-text: #137333;
  --mcp-color-success-bg: #f0fdf4;
  --mcp-color-success-border: #bbf7d0;
  --mcp-color-warning-text: #92400e;
  --mcp-color-warning-bg: #fffbeb;
  --mcp-color-warning-border: #fde68a;
  --mcp-color-danger-text: #b42318;
  --mcp-color-danger-action: #dc2626;
  --mcp-color-danger-action-hover: #b91c1c;
  --mcp-color-danger-bg: #fef2f2;
  --mcp-color-danger-border: #fecaca;
  --mcp-color-info-text: #164e8b;
  --mcp-color-info-bg: #eef6ff;
  --mcp-color-info-border: #bfdbfe;
  --mcp-color-attention-action: #f97316;

  --mcp-status-online: #137333;
  --mcp-status-warning: #b54708;
  --mcp-status-offline: #b42318;
  --mcp-chart-zone-good: #22c55e;
  --mcp-chart-zone-warning: #f59e0b;
  --mcp-chart-zone-critical: #ef4444;
  --mcp-chart-latency-ping: #2b6fe8;
  --mcp-chart-latency-https: #8b5cf6;

  --mcp-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mcp-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --mcp-font-rich: "Segoe UI", Arial, sans-serif;
  --mcp-font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

  --mcp-font-size-xs: 0.75rem;
  --mcp-font-size-sm: 0.8125rem;
  --mcp-font-size-md: 0.875rem;
  --mcp-font-size-base: 1rem;
  --mcp-font-size-lg: 1.125rem;
  --mcp-font-size-xl: 1.25rem;
  --mcp-font-size-2xl: 1.5rem;
  --mcp-font-size-3xl: 2rem;
  --mcp-line-height-tight: 1.25;
  --mcp-line-height-base: 1.55;

  --mcp-space-1: 0.125rem;
  --mcp-space-2: 0.25rem;
  --mcp-space-3: 0.5rem;
  --mcp-space-4: 0.75rem;
  --mcp-space-5: 1rem;
  --mcp-space-6: 1.25rem;
  --mcp-space-7: 1.5rem;
  --mcp-space-8: 1.75rem;
  --mcp-space-9: 2rem;
  --mcp-space-10: 2.5rem;
  --mcp-space-11: 3rem;
  --mcp-space-12: 4rem;

  --mcp-radius-sm: 0.375rem;
  --mcp-radius-md: 0.5rem;
  --mcp-radius-lg: 0.625rem;
  --mcp-radius-xl: 0.75rem;
  --mcp-radius-2xl: 0.875rem;
  --mcp-radius-card: 1.125rem;
  --mcp-radius-dialog: 1.25rem;
  --mcp-radius-pill: 999px;

  --mcp-shadow-xs: 0 1px 2px rgb(15 38 71 / 5%);
  --mcp-shadow-sm: 0 6px 18px rgb(15 38 71 / 5%);
  --mcp-shadow-md: 0 10px 28px rgb(15 38 71 / 6%);
  --mcp-shadow-lg: 0 18px 44px rgb(15 38 71 / 8%);
  --mcp-shadow-dialog: 0 24px 70px rgb(15 23 42 / 28%);

  --mcp-control-height-sm: 1.875rem;
  --mcp-control-height-nav: 2.125rem;
  --mcp-control-height-md: 2.5rem;
  --mcp-control-height-lg: 2.75rem;

  --mcp-shell-width: 90vw;
  --mcp-shell-max-width: 108rem;
  --mcp-shell-padding-x: 1.25rem;
  --mcp-header-min-height: 3.9375rem;
  --mcp-header-fixed-offset: 4.4375rem;
  --mcp-nav-item-min-width: 6.5rem;

  --mcp-motion-fast: 120ms;
  --mcp-motion-base: 180ms;
  --mcp-motion-slow: 260ms;
}

.mcp-app[data-mcp-theme="dark"] {
  color-scheme: dark;
  --mcp-color-bg-canvas: #0b1220;
  --mcp-color-bg-surface: #111827;
  --mcp-color-bg-subtle: #17233a;
  --mcp-color-bg-hover: #1e293b;
  --mcp-color-bg-selected: #162b49;
  --mcp-color-overlay: rgb(2 6 23 / 72%);
  --mcp-color-text: #e5e7eb;
  --mcp-color-text-strong: #f8fafc;
  --mcp-color-text-muted: #9ca3af;
  --mcp-color-text-disabled: #64748b;
  --mcp-color-border: #334155;
  --mcp-color-border-subtle: #1f2937;
  --mcp-color-border-strong: #475569;
  --mcp-color-link: #8ec5ff;
  --mcp-color-data-accent: #60a5fa;
  --mcp-color-focus-ring: rgb(96 165 250 / 34%);
  --mcp-color-success-text: #6ee7b7;
  --mcp-color-success-bg: rgb(19 115 51 / 18%);
  --mcp-color-success-border: rgb(110 231 183 / 38%);
  --mcp-color-warning-text: #fbbf24;
  --mcp-color-warning-bg: rgb(180 83 9 / 22%);
  --mcp-color-warning-border: rgb(251 191 36 / 42%);
  --mcp-color-danger-text: #fca5a5;
  --mcp-color-danger-bg: rgb(180 35 24 / 22%);
  --mcp-color-danger-border: rgb(252 165 165 / 40%);
  --mcp-color-info-text: #8ec5ff;
  --mcp-color-info-bg: rgb(22 78 139 / 25%);
  --mcp-color-info-border: rgb(142 197 255 / 35%);
}

@media (prefers-color-scheme: dark) {
  .mcp-app:not([data-mcp-theme="light"]) {
    color-scheme: dark;
    --mcp-color-bg-canvas: #0b1220;
    --mcp-color-bg-surface: #111827;
    --mcp-color-bg-subtle: #17233a;
    --mcp-color-bg-hover: #1e293b;
    --mcp-color-bg-selected: #162b49;
    --mcp-color-overlay: rgb(2 6 23 / 72%);
    --mcp-color-text: #e5e7eb;
    --mcp-color-text-strong: #f8fafc;
    --mcp-color-text-muted: #9ca3af;
    --mcp-color-text-disabled: #64748b;
    --mcp-color-border: #334155;
    --mcp-color-border-subtle: #1f2937;
    --mcp-color-border-strong: #475569;
    --mcp-color-link: #8ec5ff;
    --mcp-color-data-accent: #60a5fa;
    --mcp-color-focus-ring: rgb(96 165 250 / 34%);
    --mcp-color-success-text: #6ee7b7;
    --mcp-color-success-bg: rgb(19 115 51 / 18%);
    --mcp-color-success-border: rgb(110 231 183 / 38%);
    --mcp-color-warning-text: #fbbf24;
    --mcp-color-warning-bg: rgb(180 83 9 / 22%);
    --mcp-color-warning-border: rgb(251 191 36 / 42%);
    --mcp-color-danger-text: #fca5a5;
    --mcp-color-danger-bg: rgb(180 35 24 / 22%);
    --mcp-color-danger-border: rgb(252 165 165 / 40%);
    --mcp-color-info-text: #8ec5ff;
    --mcp-color-info-bg: rgb(22 78 139 / 25%);
    --mcp-color-info-border: rgb(142 197 255 / 35%);
  }
}

@media (prefers-contrast: more) {
  .mcp-app {
    --mcp-color-border: currentColor;
    --mcp-color-border-strong: currentColor;
    --mcp-color-focus-ring: currentColor;
  }
}