/* ============================================================================
ARX CUSTOM THEME — single-file colour override
----------------------------------------------------------------------------
Load this AFTER arx.css and it re-skins the entire framework:
Everything in Arx reads its colours from these --arx-* custom properties, so
changing a value here changes every component that uses it — buttons, forms,
cards, alerts, badges, tabs, the navbar, and so on. No build step required.
• :root → light-mode values
• .arx-dark → dark-mode values (active when or has .arx-dark)
This starter palette is a violet + teal theme, intentionally distinct from
the built-in blue/cyan so you can see the override working. Edit the hex
values to make it yours. (Tip: the playground page can generate this file
for you from live colour pickers — see playground.html → "Export".)
========================================================================== */
/* ── LIGHT THEME ─────────────────────────────────────────────────────────── */
:root {
/* Surfaces & lines */
--arx-bg: #faf7ff;
--arx-bg-secondary: #f3eefe;
--arx-surface: #ffffff;
--arx-surface-raised: #f6f2ff;
--arx-border: #e7dffb;
--arx-border-focus: #6d28d9;
/* Text */
--arx-text: #1e1b2e;
--arx-text-secondary: #6b6585;
--arx-text-muted: #a29db8;
--arx-text-inverse: #ffffff;
/* Primary (violet) */
--arx-primary: #6d28d9;
--arx-primary-hover: #5b21b6;
--arx-primary-subtle: #ede9fe;
--arx-primary-text: #4c1d95;
/* Secondary (teal) */
--arx-secondary: #0d9488;
--arx-secondary-hover: #0f766e;
--arx-secondary-subtle: #ccfbf1;
--arx-secondary-text: #115e59;
/* Success */
--arx-success: #16a34a;
--arx-success-hover: #15803d;
--arx-success-subtle: #dcfce7;
--arx-success-text: #14532d;
/* Danger */
--arx-danger: #e11d48;
--arx-danger-hover: #be123c;
--arx-danger-subtle: #ffe4e6;
--arx-danger-text: #881337;
/* Warning */
--arx-warning: #d97706;
--arx-warning-hover: #b45309;
--arx-warning-subtle: #fef3c7;
--arx-warning-text: #78350f;
/* Info */
--arx-info: #0284c7;
--arx-info-hover: #0369a1;
--arx-info-subtle: #e0f2fe;
--arx-info-text: #075985;
/* Navbar */
--arx-navbar-bg: #ffffff;
--arx-navbar-border: #e7dffb;
}
/* ── DARK THEME ──────────────────────────────────────────────────────────── */
.arx-dark {
/* Surfaces & lines */
--arx-bg: #0f0a1e;
--arx-bg-secondary: #150e2a;
--arx-surface: #150e2a;
--arx-surface-raised: #1d1438;
--arx-border: #2d2150;
--arx-border-focus: #a78bfa;
/* Text */
--arx-text: #d6cdf0;
--arx-text-secondary: #9a8fc0;
--arx-text-muted: #5f5685;
--arx-text-inverse: #0f0a1e;
/* Primary (violet) */
--arx-primary: #a78bfa;
--arx-primary-hover: #c4b5fd;
--arx-primary-subtle: rgba(167, 139, 250, 0.12);
--arx-primary-text: #0f0a1e;
/* Secondary (teal) */
--arx-secondary: #2dd4bf;
--arx-secondary-hover: #5eead4;
--arx-secondary-subtle: rgba(45, 212, 191, 0.12);
--arx-secondary-text: #0f0a1e;
/* Success */
--arx-success: #4ade80;
--arx-success-hover: #86efac;
--arx-success-subtle: rgba(74, 222, 128, 0.12);
--arx-success-text: #0f0a1e;
/* Danger */
--arx-danger: #fb7185;
--arx-danger-hover: #fda4af;
--arx-danger-subtle: rgba(251, 113, 133, 0.12);
--arx-danger-text: #0f0a1e;
/* Warning */
--arx-warning: #fbbf24;
--arx-warning-hover: #fcd34d;
--arx-warning-subtle: rgba(251, 191, 36, 0.12);
--arx-warning-text: #0f0a1e;
/* Info */
--arx-info: #38bdf8;
--arx-info-hover: #7dd3fc;
--arx-info-subtle: rgba(56, 189, 248, 0.12);
--arx-info-text: #0f0a1e;
/* Navbar */
--arx-navbar-bg: #150e2a;
--arx-navbar-border: #2d2150;
}