/* ========================================================================== SX3 — COLOR SYSTEM -------------------------------------------------------------------------- One palette, three layers: 1. Ramps raw hues. Never referenced directly by a component. 2. Purpose what components actually use (--surface-*, --text-*, --line). 3. Legacy the original variable names, remapped onto the new palette so untouched pages pick up the refresh automatically. Accent moved from the desaturated slate #4A526C to a brand indigo. Indigo sits furthest from the red / amber / green semantic lanes, so a primary action never reads like a status. Indigo 800 carries dark chrome — top nav, dark tabs. Indigo 600 carries interaction — primary buttons, active states, focus. ========================================================================== */ :root { /* ========================================================================== 1. RAMPS ========================================================================== */ /* --- Brand indigo -------------------------------------------------------- */ --indigo-50: #EFEFFC; --indigo-100: #DEDEF9; --indigo-200: #C4C5F4; --indigo-300: #A0A2EC; --indigo-400: #7477E0; --indigo-500: #4F55D6; --indigo-600: #3B42CC; /* primary interactive */ --indigo-700: #3036A6; /* text on indigo-50 */ --indigo-800: #2C3086; /* dark chrome: nav, dark tabs */ --indigo-900: #272961; /* --- Neutral slate (cool, tuned to the blue) ----------------------------- */ --slate-25: #FAFBFD; --slate-50: #F5F7FA; --slate-100: #EDF0F5; --slate-200: #E0E5ED; --slate-300: #CAD2DF; --slate-400: #98A2B3; /* decorative only — fails AA as text */ --slate-500: #6B7688; /* smallest readable muted text */ --slate-600: #4C5668; --slate-700: #364152; --slate-800: #212936; --slate-900: #121926; /* --- Semantic ------------------------------------------------------------ */ --green-50: #E7F6EE; --green-200: #BCE3D0; --green-600: #0F8A56; --green-700: #0B7A4B; --amber-50: #FEF3E2; --amber-200: #F6DBAE; --amber-600: #B06A08; --amber-700: #9A5B06; --red-50: #FDECEC; --red-200: #F5C7C7; --red-600: #C62F2F; --red-700: #B32626; /* ========================================================================== 2. PURPOSE TOKENS — use these in new components ========================================================================== */ /* --- Surfaces ------------------------------------------------------------ */ --surface-page: var(--slate-50); --surface-card: #FFFFFF; --surface-sunken: var(--slate-25); --surface-hover: var(--slate-100); --surface-active: var(--slate-200); --surface-chrome: var(--indigo-800); /* top nav, dark bars */ /* --- Text ---------------------------------------------------------------- */ --text-primary: var(--slate-800); /* 14.6:1 on white */ --text-secondary: var(--slate-600); /* 7.4:1 on white */ --text-muted: var(--slate-500); /* 4.6:1 on white — AA at 13px */ --text-on-accent: #FFFFFF; --text-on-chrome: #FFFFFF; /* --- Borders ------------------------------------------------------------- */ --line: var(--slate-200); --line-strong: var(--slate-300); --line-accent: var(--indigo-300); /* --- Accent -------------------------------------------------------------- */ --accent: var(--indigo-600); --accent-hover: var(--indigo-700); --accent-pressed: var(--indigo-800); --accent-soft: var(--indigo-50); --accent-soft-line: var(--indigo-200); --accent-text: var(--indigo-700); /* accent text on --accent-soft */ /* --- Semantic ------------------------------------------------------------ */ --success: var(--green-700); --success-solid: var(--green-600); --success-soft: var(--green-50); --success-line: var(--green-200); --warning: var(--amber-700); --warning-solid: var(--amber-600); --warning-soft: var(--amber-50); --warning-line: var(--amber-200); --danger: var(--red-700); --danger-solid: var(--red-600); --danger-hover: var(--red-700); --danger-soft: var(--red-50); --danger-line: var(--red-200); --info: var(--indigo-700); --info-soft: var(--indigo-50); /* --- Radius -------------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* --- Elevation — popovers and modals only -------------------------------- */ --shadow-sm: 0 1px 2px rgba(18, 25, 38, 0.05); --shadow-popover: 0 4px 16px rgba(18, 25, 38, 0.10), 0 1px 3px rgba(18, 25, 38, 0.06); --shadow-modal: 0 16px 48px rgba(18, 25, 38, 0.18), 0 2px 8px rgba(18, 25, 38, 0.08); /* --- Focus --------------------------------------------------------------- */ --focus-ring: 0 0 0 3px rgba(59, 66, 204, 0.22); /* --- Spacing ------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* --- Type scale ---------------------------------------------------------- */ --fs-caption: 12px; --fs-label: 13px; --fs-body: 14px; --fs-value: 15px; --fs-title: 17px; --fs-heading: 20px; /* --- Layout -------------------------------------------------------------- */ --page-max: 1360px; --sidebar-w: 400px; --header-offset: 62px; /* height of the global top_menu */ /* --- Motion -------------------------------------------------------------- */ --dur-fast: 120ms; --dur-base: 180ms; --ease: cubic-bezier(0.2, 0, 0.2, 1); /* --- Chart palette -------------------------------------------------------- Used by the dashboard donut when a status has no STAcolorback set, and by any future report that needs a categorical series. Ordered so that neighbouring slices stay distinguishable, and kept clear of the semantic lanes above: nothing here is close enough to --success / --warning / --danger to be mistaken for a status meaning. -------------------------------------------------------------------------- */ --chart-1: var(--indigo-600); --chart-2: #2E9AA8; --chart-3: #7C5BD3; --chart-4: #D98324; --chart-5: #3F8ED8; --chart-6: #C05C9B; --chart-7: #5AA469; --chart-8: #8A94A6; --chart-empty: var(--slate-200); /* ========================================================================== 3. LEGACY NAMES — remapped onto the new palette. Every original variable is still declared, so pages that were never touched keep working and pick up the new colors automatically. Do not use these in new markup; use the purpose tokens above. ========================================================================== */ --muted: var(--slate-600); --bg-dark-page: var(--slate-50); --bg-pill-admin: var(--amber-50); --bg-pill-member: var(--green-50); --color-accent: var(--indigo-600); --color-accent-light: var(--indigo-100); --color-pill-admin: var(--amber-700); --color-pill-member: var(--green-700); --bg-ligh-menu: var(--slate-50); --bg-dark-menu: var(--slate-100); --bg-darker-menu: var(--slate-300); --bg-dark-tab: var(--indigo-800); --color-dark-tab: #FFFFFF; --bg-light-tab: #FFFFFF; --color-light-tab: var(--indigo-800); --bg-extra-light-div: var(--slate-25); --bg-light-div: var(--slate-50); --bg-dark-div: var(--slate-200); --div-radius: 8px; --div-border-light: var(--slate-200); --field-border: var(--slate-300); --field-border-hover: var(--slate-400); --field-border-focus: var(--indigo-600); --field-background: #FFFFFF; --field-background-focus: #FFFFFF; --field-background-hover: #FFFFFF; --field-radius: 6px; --field-color: var(--slate-800); --field-placeholder-color: var(--slate-500); --field-placeholder-font-weight: 400; --field-placeholder-font-size: 14px; --button-gray-color: var(--slate-600); --button-gray-back: var(--slate-100); --button-small-radius: 6px; --toast-background: var(--slate-800); --toast-color: #FFFFFF; --toast-font-size: 14px; --toast-font-weight: 400; --toast-radius: 8px; }