pulsenode/app/globals.css

@import "tailwindcss";

:root {
  --pn-bg: #0a0e13;
  --pn-surface: #10151c;
  --pn-surface-raised: #161d27;
  --pn-border: #232b38;
  --pn-fg: #e8ecf1;
  --pn-fg-muted: #7c8798;
  --pn-accent: #3ee8a8;
  --pn-radius: 0.75rem;
  --pn-status-up: #3ee8a8;
  --pn-status-down: #ff5f6d;
  --pn-status-degraded: #ffb84c;
}

:root[data-theme="light"] {
  --pn-bg: #f6f7f5;
  --pn-surface: #ffffff;
  --pn-surface-raised: #eef1ef;
  --pn-border: #dde1de;
  --pn-fg: #12181a;
  --pn-fg-muted: #5c6b66;
  --pn-accent: #0e9f6e;
  --pn-status-up: #0e9f6e;
  --pn-status-down: #dc2626;
  --pn-status-degraded: #d97706;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --pn-bg: #f6f7f5;
    --pn-surface: #ffffff;
    --pn-surface-raised: #eef1ef;
    --pn-border: #dde1de;
    --pn-fg: #12181a;
    --pn-fg-muted: #5c6b66;
    --pn-accent: #0e9f6e;
    --pn-status-up: #0e9f6e;
    --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);
  --font-sans: var(--font-plex-sans);
  --font-mono: var(--font-plex-mono);
  --font-display: var(--font-space-grotesk);
}

body {
  background: var(--pn-bg);
  color: var(--pn-fg);
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--pn-status-up) 55%, transparent);
  }
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pn-status-up) 0%, transparent);
  }
}

.status-pulse {
  animation: pulse-glow 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .status-pulse {
    animation: none;
  }
}