/* ============================================================ Focus Managed Services — Color System Exact brand values sampled from the brand guidelines artwork: Primary red #EE3E35 Deep red #C31D2A Charcoal #322F3D Slate #3A3947 Warm orange #D8681E Gold/amber #F1B71C Red is the signal color; charcoal + neutrals carry the frame. ============================================================ */ :root { /* ---------- Brand red (signal) ---------- */ --red-50: #FDECEB; --red-100: #FBD6D3; --red-200: #F6ADA8; --red-300: #F2827B; --red-400: #F15A50; --red-500: #EE3E35; /* CORE — Primary Brand Color */ --red-600: #DC2E26; /* hover */ --red-700: #C31D2A; /* active / deep red (guidelines) */ --red-800: #9E1720; --red-900: #7A1219; /* ---------- Charcoal / slate (structure) ---------- */ --charcoal: #322F3D; /* CORE brand dark */ --slate-950: #141319; --slate-900: #1B1A22; --slate-800: #26242F; --slate-700: #322F3D; /* == charcoal */ --slate-600: #3A3947; /* guidelines slate variant */ --slate-500: #4C4A5A; /* ---------- Neutral ramp (slate-tinted grays) ---------- */ --neutral-0: #FFFFFF; --neutral-25: #FAFAFB; --neutral-50: #F4F4F6; --neutral-100: #E9E9EC; /* ~guidelines #E8E8E8 */ --neutral-200: #D8D8DD; /* ~guidelines #D1D1D1 */ --neutral-300: #C0C0C8; --neutral-400: #9C9CA7; --neutral-500: #7A7A85; --neutral-600: #5B5A66; --neutral-700: #42414D; --neutral-800: #2C2B35; --neutral-900: #1F1D26; --neutral-950: #141319; /* ---------- Warm secondary accents ---------- */ --orange-400: #E5843F; --orange-500: #D8681E; /* guidelines warm orange */ --orange-600: #B9530F; --amber-400: #F5C64A; --amber-500: #F1B71C; /* guidelines gold */ --amber-600: #D19A05; /* ---------- Cool accent (ties to corporate imagery) ---------- */ --blue-400: #4C86E6; --blue-500: #2F6FE0; --blue-600: #1F55BC; /* ---------- Status / feedback ---------- */ --green-500: #1F9D57; --green-600: #167942; --red-signal: #EE3E35; --amber-signal: #F1B71C; --blue-signal: #2F6FE0; /* ============================================================ SEMANTIC ALIASES (light theme — default) ============================================================ */ --brand-primary: var(--red-500); --brand-primary-hover: var(--red-600); --brand-primary-active: var(--red-700); --brand-primary-tint: var(--red-50); --brand-charcoal: var(--charcoal); --surface-page: var(--neutral-50); --surface-card: var(--neutral-0); --surface-sunken: var(--neutral-100); --surface-raised: var(--neutral-0); --surface-inverse: var(--charcoal); --surface-hover: var(--neutral-50); --surface-selected: var(--red-50); --text-primary: var(--neutral-900); --text-secondary: var(--neutral-600); --text-muted: var(--neutral-500); --text-disabled: var(--neutral-400); --text-inverse: var(--neutral-0); --text-brand: var(--red-500); --text-on-brand: #FFFFFF; --link: var(--red-600); --link-hover: var(--red-700); --border-subtle: var(--neutral-100); --border-default: #E1E1E6; --border-strong: var(--neutral-300); --border-inverse: rgba(255, 255, 255, 0.16); --border-brand: var(--red-500); --focus-ring: rgba(238, 62, 53, 0.40); /* status semantic */ --success-fg: var(--green-600); --success-bg: #E4F5EC; --success-solid: var(--green-500); --warning-fg: var(--amber-600); --warning-bg: #FCF3D8; --warning-solid: var(--amber-500); --danger-fg: var(--red-700); --danger-bg: var(--red-50); --danger-solid: var(--red-500); --info-fg: var(--blue-600); --info-bg: #E7EFFC; --info-solid: var(--blue-500); } /* ============================================================ DARK THEME — for ops / monitoring surfaces Apply with or .theme-dark ============================================================ */ :root[data-theme="dark"], .theme-dark { --surface-page: var(--slate-950); --surface-card: var(--slate-800); --surface-sunken: var(--slate-900); --surface-raised: var(--slate-700); --surface-inverse: var(--neutral-0); --surface-hover: rgba(255, 255, 255, 0.05); --surface-selected: rgba(238, 62, 53, 0.16); --text-primary: #F2F2F4; --text-secondary: #B7B6C0; --text-muted: #86858F; --text-disabled: #5B5A66; --text-inverse: var(--neutral-900); --text-on-brand: #FFFFFF; --link: var(--red-400); --link-hover: var(--red-300); --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.22); --border-brand: var(--red-500); --success-bg: rgba(31, 157, 87, 0.16); --warning-bg: rgba(241, 183, 28, 0.16); --danger-bg: rgba(238, 62, 53, 0.16); --info-bg: rgba(47, 111, 224, 0.16); --success-fg: #4FC684; --warning-fg: #F5C64A; --danger-fg: #F2827B; --info-fg: #6E9DF0; }