/* ============================================================ Metrix — Color System ------------------------------------------------------------ Dual-theme, dark-first. The live product ships two themes selected by [data-theme] on : • brand (DEFAULT) — purple → pink on pure dark #050505. Matches the Metrix Brand System v1.0 (style-guide.html + Brand System PDF). • legacy — cyan + violet "neon dark" on blue-grey. The earlier dashboard look. Tokens come in two layers: 1. BASE raw brand/neutral/state values (hex + alpha). 2. SEMANTIC role-based aliases consumers should reach for (--text-body, --surface-card, --accent, …). RGB-triplet mirrors (--rgb-*) are provided for the brand accents so you can compose your own translucent values, e.g. rgb(var(--rgb-accent) / 0.15) — same trick the real app uses. ============================================================ */ :root, :root[data-theme="brand"] { /* ---- BASE · Brand (purple → pink) ---- */ --purple: #7C3AED; /* primary brand */ --purple-dark: #9D4EDD; /* button gradient end */ --purple-light: #C084FC; /* accent text */ --purple-faint: #A78BFA; /* subtle details, numbering */ --badge-purple: #C4B5FD; /* badge / highlight text */ --pink: #F4A7BB; /* brand gradient close */ --pink-strong: #E891A8; /* pink active */ --rgb-accent: 124 58 237; /* @kind color */ --rgb-accent-2: 244 167 187; /* @kind color */ --rgb-highlight: 196 181 253; /* @kind color */ /* ---- BASE · Semantic states ---- */ --green: #34D399; /* metrics ok */ --green-bright: #00D26A; /* positive / up */ --amber: #FCD34D; /* warning */ --amber-warm: #F59E0B; /* alert border */ --red: #FF4D6A; /* negative / down */ --info: #4CC9F0; /* informational (kept cyan) */ /* ---- BASE · Neutrals (dark) ---- */ --bg: #050505; /* app base background */ --bg-canvas: #0A0A0A; /* canvas */ --bg-elevated: #101010; /* elevated background */ --white: #FAFAFA; /* text white */ /* Translucent-white surfaces over the deep dark */ --surface: rgba(255,255,255,0.04); /* card surface (glass) */ --surface-2: rgba(255,255,255,0.08); /* elevated / pills */ --surface-solid: #0D0D0D; /* opaque card */ --surface-solid-2: #131313; /* opaque elevated */ --surface-solid-3: #1A1A1A; /* opaque tertiary */ --border: rgba(255,255,255,0.08); /* default border */ --border-subtle: rgba(255,255,255,0.06); /* hairline */ --border-strong: rgba(255,255,255,0.15); /* emphasised border */ --border-accent: rgba(124,58,237,0.40); /* brand border */ /* Text on dark */ --text: #FAFAFA; /* primary */ --text-secondary: #C7C7C7; /* secondary */ --muted: rgba(255,255,255,0.70); /* body / muted */ --muted-2: rgba(255,255,255,0.55); /* softer */ --muted-3: rgba(255,255,255,0.35); /* captions / placeholder */ --text-inverse: #050505; /* on light/brand fills */ /* ---- SEMANTIC aliases ---- */ --accent: var(--purple); --accent-hover: #9D4EDD; --accent-active: #6D28D9; --accent-2: var(--pink); --accent-highlight: var(--badge-purple); --text-heading: var(--text); --text-body: var(--muted); --text-caption: var(--muted-3); --link: var(--purple-light); --surface-page: var(--bg); --surface-card: var(--surface); --surface-raised: var(--surface-2); --surface-nav: rgba(5,5,5,0.85); --field-bg: rgba(255,255,255,0.03); --field-border: var(--border-strong); --field-focus: var(--purple); --field-placeholder: var(--muted-3); --focus-ring: rgba(124,58,237,0.15); --focus-border: rgba(124,58,237,0.60); /* Button roles */ --btn-primary-bg: var(--purple); --btn-primary-text: #FFFFFF; --btn-primary-hover: #9D4EDD; --btn-secondary-bg: var(--surface-solid-2); --btn-secondary-text:var(--text); --btn-ghost-text: var(--text-secondary); --btn-ghost-hover: rgba(255,255,255,0.05); /* Status surfaces (badge tints) */ --success: var(--green); --warning: var(--amber); --danger: var(--red); --success-bg: rgba(52,211,153,0.14); --warning-bg: rgba(252,211,77,0.14); --danger-bg: rgba(255,77,106,0.14); --info-bg: rgba(76,201,240,0.16); --neutral-bg: rgba(255,255,255,0.06); /* Chart series */ --chart-1: var(--purple); --chart-2: var(--pink); --chart-3: var(--badge-purple); --chart-4: var(--amber); --chart-5: var(--red); } /* ============================================================ LEGACY THEME — cyan + violet neon-dark. Apply with . ============================================================ */ :root[data-theme="legacy"] { --purple: #7C5CFF; --purple-dark: #6D4AF2; --purple-light: #9277FF; --purple-faint: #9277FF; --badge-purple: #9BFFED; --pink: #9BFFED; --pink-strong: #7C5CFF; --rgb-accent: 76 201 240; /* @kind color */ --rgb-accent-2: 124 92 255; /* @kind color */ --rgb-highlight: 155 255 237; /* @kind color */ --green: #22C55E; --green-bright: #22C55E; --amber: #F59E0B; --amber-warm: #F59E0B; --red: #EF4444; --info: #38BDF8; --bg: #0E1118; --bg-canvas: #12161F; --bg-elevated: #161B26; --white: #F5F7FA; --surface: rgba(19,25,34,0.72); --surface-2: rgba(24,32,43,0.82); --surface-solid: #0E1218; --surface-solid-2: #131922; --surface-solid-3: #18202B; --border: rgba(255,255,255,0.10); --border-subtle: rgba(255,255,255,0.06); --border-strong: rgba(255,255,255,0.16); --border-accent: rgba(76,201,240,0.40); --text: #F5F7FA; --text-secondary: #C7D0DB; --muted: rgba(199,208,219,0.85); --muted-2: #8B98A7; --muted-3: #66717E; --text-inverse: #05070B; --accent: #4CC9F0; --accent-hover: #67D4F4; --accent-active: #32B8E4; --accent-2: #7C5CFF; --accent-highlight: #9BFFED; --link: #4CC9F0; --surface-nav: rgba(14,17,24,0.78); --field-bg: rgba(255,255,255,0.03); --field-focus: #4CC9F0; --focus-ring: rgba(76,201,240,0.16); --focus-border: rgba(76,201,240,0.60); --btn-primary-bg: #4CC9F0; --btn-primary-text: #05070B; --btn-primary-hover: #67D4F4; --success: #22C55E; --warning: #F59E0B; --danger: #EF4444; --success-bg: rgba(34,197,94,0.14); --warning-bg: rgba(245,158,11,0.16); --danger-bg: rgba(239,68,68,0.16); --info-bg: rgba(76,201,240,0.16); --chart-1: #4CC9F0; --chart-2: #7C5CFF; --chart-3: #9BFFED; --chart-4: #F59E0B; --chart-5: #EF4444; }