@import "tailwindcss";

:root {
  --pn-bg: #0b0d12;
  --pn-surface: #12151c;
  --pn-surface-raised: #171b24;
  --pn-border: #242938;
  --pn-fg: #e6e8ee;
  --pn-fg-muted: #8a90a2;
  --pn-accent: #38bdf8;
  --pn-radius: 0.75rem;
  --pn-status-up: #34d399;
  --pn-status-down: #f87171;
  --pn-status-degraded: #fbbf24;
}

:root[data-theme="light"] {
  --pn-bg: #f5f6f8;
  --pn-surface: #ffffff;
  --pn-surface-raised: #f0f1f4;
  --pn-border: #e2e4ea;
  --pn-fg: #14161c;
  --pn-fg-muted: #666b7a;
  --pn-accent: #0284c7;
  --pn-status-up: #059669;
  --pn-status-down: #dc2626;
  --pn-status-degraded: #d97706;
}

@theme inline {
  --color-bg: var(--pn-bg);
  --color-surface: var(--pn-surface);
  --color-surface-raised: var(--pn-surface-raised);
  --color-border: var(--pn-border);
  --color-fg: var(--pn-fg);
  --color-fg-muted: var(--pn-fg-muted);
  --color-accent: var(--pn-accent);
  --color-status-up: var(--pn-status-up);
  --color-status-down: var(--pn-status-down);
  --color-status-degraded: var(--pn-status-degraded);
  --radius-widget: var(--pn-radius);
}

body {
  background: var(--pn-bg);
  color: var(--pn-fg);
  font-family:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}