/*
 * Global design tokens shared by every Lit component.
 *
 * CSS custom properties are inherited, so they cross shadow-DOM boundaries and
 * remain available inside each element's `static styles`. The palette mirrors
 * doorjames-website (assets/js/Pages/Dashboard/dashboard.page.css) so the
 * monitor matches the marketing site's dark "violet glass" identity.
 */
:root {
  --dj-violet: #5236ab;
  --dj-violet-2: #6c4ec8;
  --dj-violet-3: #8f79df;
  --dj-violet-4: #c7bbef;
  --dj-violet-5: #ddd5f8;
  --dj-violet-rgb: 82, 54, 171;
  --dj-violet-2-rgb: 108, 78, 200;
  --dj-violet-3-rgb: 143, 121, 223;
  --dj-violet-4-rgb: 199, 187, 239;

  --dj-ink: #070412;
  --dj-ink-2: #0f0b1e;
  --dj-text: rgba(255, 255, 255, 0.92);
  --dj-text-soft: rgba(255, 255, 255, 0.62);
  --dj-text-faint: rgba(255, 255, 255, 0.4);

  --dj-glass-bg: rgba(15, 11, 30, 0.58);
  --dj-glass-bg-strong: rgba(10, 7, 22, 0.72);
  --dj-glass-border: rgba(255, 255, 255, 0.16);
  --dj-glass-shadow: 0 12px 34px rgba(5, 2, 13, 0.34);
  --dj-radius: 1rem;

  /* Status palette for handler coverage / event states */
  --dj-active: #34d399;
  --dj-active-rgb: 52, 211, 153;
  --dj-passive: #fbbf24;
  --dj-passive-rgb: 251, 191, 36;
  --dj-unhandled: #f87171;
  --dj-unhandled-rgb: 248, 113, 113;
  --dj-action: #60a5fa;
  --dj-action-rgb: 96, 165, 250;

  color-scheme: dark;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  font-family: "Sora", "Poppins", ui-sans-serif, system-ui, sans-serif;
  color: var(--dj-text);
  background:
    radial-gradient(circle at 15% 10%, rgba(var(--dj-violet-3-rgb), 0.16) 0%, transparent 28%),
    radial-gradient(circle at 85% 20%, rgba(var(--dj-violet-rgb), 0.2) 0%, transparent 24%),
    linear-gradient(180deg, #05020d 0%, var(--dj-ink) 30%, #0b0716 100%);
  background-attachment: fixed;
  min-height: 100vh;
}