/* SMD Technologies — shared admin design tokens. Single source of truth (UM-A). Consumed by RoleConfiguration + all User Management pages. */ :root { /* Brand */ --smd-red: #C8102E; --smd-red-dark: #9E0A23; --smd-red-light: #FDECEF; --smd-red-tint: #FFF5F7; /* Neutrals */ --ink-900: #111317; --ink-700: #2A2E36; --ink-500: #5A6170; --ink-400: #828A99; --ink-300: #C2C7D1; --ink-200: #E4E7EC; --ink-100: #F1F3F6; --ink-50: #F8F9FB; --paper: #FFFFFF; /* Semantic */ --success: #1A6640; --warning: #B7791F; --danger: #A32D2D; /* Surfaces */ --shadow-sm: 0 1px 2px rgba(17,19,23,0.04), 0 1px 1px rgba(17,19,23,0.03); --shadow-md: 0 4px 12px rgba(17,19,23,0.06), 0 2px 4px rgba(17,19,23,0.04); --shadow-lg: 0 12px 32px rgba(17,19,23,0.10), 0 4px 8px rgba(17,19,23,0.05); --shadow-red: 0 8px 24px rgba(200,16,46,0.18); /* Geometry */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } /* Dark theme — activated by data-theme="dark" on (Site.theme.set("dark")). The neutral ink ramp is INVERTED: ink-900 (light-mode primary text, near-black) becomes the lightest tone, and ink-50/--paper (light-mode surfaces, near-white) become the dark canvas/cards. Every fully-tokenised User Management page (RoleConfiguration is 100% var-driven) flips automatically off this block. Values mirror core/variables.css's Bootstrap-5-dark palette (#212529 canvas stepping up through #2b3035 → #495057) so the UM chrome blends with the rest of the dark app. Brand-red tints become translucent washes so they read over the dark surfaces instead of glaring near-white. */ :root[data-theme="dark"] { /* Brand — lift the red for contrast on the dark canvas; tints go translucent. */ --smd-red: #e63b4f; --smd-red-dark: #C8102E; --smd-red-light: rgba(230, 59, 79, 0.22); --smd-red-tint: rgba(230, 59, 79, 0.12); /* Neutrals — inverted ramp. */ --ink-900: #f1f3f6; /* primary text / titles */ --ink-700: #dee2e6; /* strong text / headings */ --ink-500: #adb5bd; /* secondary text */ --ink-400: #8a929c; /* muted text / icons / placeholders */ --ink-300: #495057; /* strong borders / disabled text */ --ink-200: #343a40; /* subtle borders / dividers */ --ink-100: #2f343a; /* raised tints / pills */ --ink-50: #212529; /* page canvas */ --paper: #2b3035; /* cards / panels / inputs */ /* Semantic — lifted for legibility on dark. */ --success: #5ad06f; --warning: #e0c98c; --danger: #ff6b6b; /* Surfaces — deepen the shadows against the dark canvas. */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.40), 0 1px 1px rgba(0,0,0,0.30); --shadow-md: 0 4px 12px rgba(0,0,0,0.50), 0 2px 4px rgba(0,0,0,0.35); --shadow-lg: 0 12px 32px rgba(0,0,0,0.60), 0 4px 8px rgba(0,0,0,0.40); --shadow-red: 0 8px 24px rgba(230,59,79,0.30); }