/* Semantic design tokens for the apisense-platform admin.
Reference these CSS variables from component CSS and templates instead of
hardcoding hex colors. Each token has a light value (in :root) and a dark
override (in .dark). The class .dark is toggled on by Alpine.js.
Conventions:
- sev-N: severity scale, N in {0..3} (0 healthy, 3 critical)
- action-*: filled buttons by intent (primary, success, info, special)
- surface-*: backgrounds for layered UI
- text-*: foreground text colors by emphasis
- border-*: borders by strength
The .sev-{0..3} / .action-{name} utility classes are provided so templates
can stop using inline `style="background:#xxx;color:#yyy"` and instead use
`class="sev-2"` which automatically picks up the theme. */
:root {
/* Severity ladder ----------------------------------------------------- */
--sev-0-bg: #dcfce7; --sev-0-fg: #15803d;
--sev-1-bg: #fef9c3; --sev-1-fg: #a16207;
--sev-2-bg: #ffedd5; --sev-2-fg: #c2410c;
--sev-3-bg: #fee2e2; --sev-3-fg: #b91c1c;
--sev-0-dot: #22c55e;
--sev-1-dot: #eab308;
--sev-2-dot: #f97316;
--sev-3-dot: #ef4444;
/* Action buttons ------------------------------------------------------ */
--action-primary-bg: #2563eb; --action-primary-bg-hover: #1d4ed8; --action-primary-fg: #ffffff;
--action-success-bg: #059669; --action-success-bg-hover: #047857; --action-success-fg: #ffffff;
--action-info-bg: #0ea5e9; --action-info-bg-hover: #0284c7; --action-info-fg: #ffffff;
--action-special-bg: #7c3aed; --action-special-bg-hover: #6d28d9; --action-special-fg: #ffffff;
--action-danger-bg: #dc2626; --action-danger-bg-hover: #b91c1c; --action-danger-fg: #ffffff;
/* Surfaces ------------------------------------------------------------ */
--surface-page: #f8fafc;
--surface-card: #ffffff;
--surface-sunken: #f1f5f9;
--surface-input: #ffffff;
--surface-overlay: rgba(15, 23, 42, 0.6);
--surface-tooltip: #1f2937;
--surface-tooltip-fg:#f9fafb;
/* Text ---------------------------------------------------------------- */
--text-strong: #0f172a;
--text-body: #1f2937;
--text-muted: #6b7280;
--text-faint: #9ca3af;
--text-inverse:#f9fafb;
/* Borders ------------------------------------------------------------- */
--border-strong: #cbd5e1;
--border-base: #e2e8f0;
--border-faint: #f1f5f9;
/* Misc accents -------------------------------------------------------- */
--accent-purple-strong: #7c3aed;
--accent-purple-soft: rgba(168, 85, 247, 0.25);
--accent-amber: #d97706;
/* Plot / chart axes (used by inline JS charts) ------------------------ */
--chart-axis: #6b7280;
--chart-grid: rgba(0, 0, 0, 0.08);
--chart-tick: #cbd5e1;
}
.dark {
--sev-0-bg: rgb(20 83 45 / 0.35); --sev-0-fg: #86efac;
--sev-1-bg: rgb(113 63 18 / 0.35); --sev-1-fg: #fde047;
--sev-2-bg: rgb(124 45 18 / 0.35); --sev-2-fg: #fdba74;
--sev-3-bg: rgb(127 29 29 / 0.35); --sev-3-fg: #fca5a5;
--sev-0-dot: #22c55e;
--sev-1-dot: #facc15;
--sev-2-dot: #fb923c;
--sev-3-dot: #f87171;
--action-primary-bg: #3b82f6; --action-primary-bg-hover: #2563eb;
--action-success-bg: #10b981; --action-success-bg-hover: #059669;
--action-info-bg: #38bdf8; --action-info-bg-hover: #0ea5e9; --action-info-fg: #0c2333;
--action-special-bg: #8b5cf6; --action-special-bg-hover: #7c3aed;
--action-danger-bg: #ef4444; --action-danger-bg-hover: #dc2626;
--surface-page: #0f172a;
--surface-card: #1e293b;
--surface-sunken: #0f172a;
--surface-input: #0f172a;
--surface-overlay: rgba(0, 0, 0, 0.85);
--surface-tooltip: #e5e7eb;
--surface-tooltip-fg: #111827;
--text-strong: #f8fafc;
--text-body: #e2e8f0;
--text-muted: #94a3b8;
--text-faint: #64748b;
--text-inverse:#0f172a;
--border-strong: #475569;
--border-base: #334155;
--border-faint: #1e293b;
--accent-purple-strong: #a78bfa;
--accent-purple-soft: rgba(168, 85, 247, 0.35);
--accent-amber: #fbbf24;
--chart-axis: #9ca3af;
--chart-grid: rgba(255, 255, 255, 0.12);
--chart-tick: #475569;
}
/* Severity utility classes — drop-in replacement for inline status styles.
Use with template logic: …
Also exposes `text-sev-N` for cases where only the foreground matters. */
.sev-0 { background: var(--sev-0-bg); color: var(--sev-0-fg); }
.sev-1 { background: var(--sev-1-bg); color: var(--sev-1-fg); }
.sev-2 { background: var(--sev-2-bg); color: var(--sev-2-fg); }
.sev-3 { background: var(--sev-3-bg); color: var(--sev-3-fg); }
.text-sev-0 { color: var(--sev-0-fg); }
.text-sev-1 { color: var(--sev-1-fg); }
.text-sev-2 { color: var(--sev-2-fg); }
.text-sev-3 { color: var(--sev-3-fg); }
.dot-sev-0 { background: var(--sev-0-dot); }
.dot-sev-1 { background: var(--sev-1-dot); }
.dot-sev-2 { background: var(--sev-2-dot); }
.dot-sev-3 { background: var(--sev-3-dot); }
/* Filled action button helpers. Pair with sizing/typography utilities from
Tailwind. E.g. `