/* LiveMentorHub v109 — unified design tokens. The portal accumulated six independent token systems across releases: styles_v73.css --blue / --ink / --surface (two conflicting :root blocks) styles_v74_premium.css --p-* accent #4C5BD4 styles_v90_workspace.css --v90-* blue #155eef styles_v106.css --work-* blue #155eef styles_v107.css --c-* blue #245edb, and it re-points --p-* styles_v108.css --p-ink / --p-blue blue #175ed0 Five different primary blues rendered the same concept differently depending on which release drew the screen. Those stylesheets are hash-locked by tests/fixtures/v106-protected.json and v108-preserved.json, so they are not edited here. Instead this sheet declares one semantic contract and then re-points every legacy variable at it. Legacy rules keep their own selectors and their own !important declarations, but resolve their colours through these tokens — so unification and dark mode arrive without a specificity fight and without touching a protected file. Rules that hardcode a hex value rather than reading a variable are handled in styles_v109_shell.css. Load order: after every existing stylesheet. */ /* ============================================================ 1. Semantic contract — light ============================================================ */ :root { color-scheme: light; /* Surfaces, from furthest back to nearest front. */ --lmh-bg: #f5f7fa; --lmh-surface: #ffffff; --lmh-surface-2: #f7f9fc; --lmh-surface-3: #f1f5f9; --lmh-rail: #fbfbfd; /* sidebar */ --lmh-overlay: rgba(16, 25, 43, .45); /* Separators. */ --lmh-line: #e5eaf1; --lmh-line-strong: #d0d7e2; --lmh-hair: rgba(16, 24, 40, .07); /* Text, in descending emphasis. */ --lmh-text: #172b43; --lmh-text-2: #52657b; /* The inherited value here was #8994a8, which the portal uses for .section-sub, table headers, .muted and most 9-12px secondary labels. At those sizes it measured 2.75-3.06:1 against the surfaces it sits on, below the 4.5:1 that small text needs. Darkening it compresses the gap to --lmh-text-2 slightly; that is the deliberate trade for legible secondary copy. */ --lmh-text-3: #5f6d80; --lmh-text-on-fill: #ffffff; /* Primary action. One blue, chosen as the v108 documented value. */ --lmh-primary: #175ed0; --lmh-primary-hover: #1a68e4; --lmh-primary-active: #134fae; --lmh-primary-tint: #edf3ff; --lmh-primary-tint-2: #dfeaff; --lmh-primary-ring: rgba(23, 94, 208, .22); --lmh-link: #175ed0; /* Status. Each has a readable foreground, a fill and a ring. */ --lmh-success: #14714d; --lmh-success-bg: #e9f5ef; --lmh-success-ring: rgba(20, 113, 77, .20); --lmh-warning: #8a5710; --lmh-warning-bg: #fbf2df; --lmh-warning-ring: rgba(138, 87, 16, .20); --lmh-danger: #b32b37; --lmh-danger-bg: #fceceb; --lmh-danger-ring: rgba(179, 43, 55, .20); --lmh-accent: #05786d; /* teal progress accent */ --lmh-neutral-bg: #eef1f6; /* Elevation. */ --lmh-shadow-1: 0 1px 2px rgba(16, 25, 43, .06); --lmh-shadow-2: 0 4px 14px rgba(16, 25, 43, .08); --lmh-shadow-3: 0 12px 32px rgba(16, 25, 43, .12); /* Radii and motion. */ --lmh-r-xs: 7px; --lmh-r-sm: 9px; --lmh-r: 12px; --lmh-r-lg: 16px; --lmh-r-xl: 20px; --lmh-ease: cubic-bezier(.32, .72, 0, 1); --lmh-fast: .14s; --lmh-med: .2s; } /* ============================================================ 2. Semantic contract — dark Same names, re-valued. Nothing below this point knows the theme. ============================================================ */ :root[data-theme="dark"] { color-scheme: dark; --lmh-bg: #0e1420; --lmh-surface: #151d2c; --lmh-surface-2: #1b2434; --lmh-surface-3: #222c3e; --lmh-rail: #121a27; --lmh-overlay: rgba(0, 0, 0, .60); --lmh-line: #2a3547; --lmh-line-strong: #3a4761; --lmh-hair: rgba(255, 255, 255, .09); --lmh-text: #e8edf5; --lmh-text-2: #a7b4c8; --lmh-text-3: #8f9cb2; --lmh-text-on-fill: #ffffff; /* White label on the fill needs 4.5:1, and hovering a dark theme conventionally lightens. #2d6ee6 as the base left the lighter hover at 3.61:1, so the whole ramp shifts one step darker: base 5.80:1, hover 4.68:1, active 7.29:1. */ --lmh-primary: #2560cc; --lmh-primary-hover: #2d6ee6; --lmh-primary-active: #1d51b3; --lmh-primary-tint: #1a2942; --lmh-primary-tint-2: #21324f; --lmh-primary-ring: rgba(91, 155, 255, .35); --lmh-link: #86b4ff; --lmh-success: #4ecb96; --lmh-success-bg: #122c22; --lmh-success-ring: rgba(78, 203, 150, .28); --lmh-warning: #e8b25f; --lmh-warning-bg: #2e2415; --lmh-warning-ring: rgba(232, 178, 95, .28); --lmh-danger: #f38b8b; --lmh-danger-bg: #331b1d; --lmh-danger-ring: rgba(243, 139, 139, .28); --lmh-accent: #47c3b5; --lmh-neutral-bg: #202a3b; --lmh-shadow-1: 0 1px 2px rgba(0, 0, 0, .40); --lmh-shadow-2: 0 4px 14px rgba(0, 0, 0, .45); --lmh-shadow-3: 0 12px 32px rgba(0, 0, 0, .55); } /* The system preference is resolved to a concrete data-theme by the inline snippet in index.html before first paint, so no prefers-color-scheme copy is needed here. Keeping one mechanism means the generated dark sheet — which ships only the explicit form — can never disagree with these tokens. */ /* ============================================================ 3. Legacy re-pointing Every variable the frozen stylesheets read now resolves through the contract above. Specificity is matched to the original declaration and this sheet loads last, so ties resolve here. ============================================================ */ /* --- styles_v73.css: both :root blocks, plus its raw palette scales --- */ :root { --white: var(--lmh-surface); --surface: var(--lmh-surface); --surface-2: var(--lmh-surface-2); --surface-3: var(--lmh-surface-3); --card: var(--lmh-surface); --border: var(--lmh-line); --line: var(--lmh-line); --text-primary: var(--lmh-text); --text-secondary: var(--lmh-text-2); --text-muted: var(--lmh-text-3); --ink: var(--lmh-text); --ink-soft: var(--lmh-text-2); --blue: var(--lmh-primary); --blue-soft: var(--lmh-primary-tint); --radius-sm: var(--lmh-r-sm); --radius-md: var(--lmh-r); --radius-lg: var(--lmh-r-lg); --radius-xl: var(--lmh-r-xl); --shadow-sm: var(--lmh-shadow-1); --shadow-md: var(--lmh-shadow-2); --shadow-lg: var(--lmh-shadow-3); --shadow-card: var(--lmh-shadow-1); --shadow-soft: var(--lmh-shadow-2); --shadow-hover: var(--lmh-shadow-3); /* Numbered scales are used directly by many v73 rules. Grey steps are re-ordered under dark so "50" stays the faintest surface, not the brightest. */ --gray-50: var(--lmh-surface-2); --gray-100: var(--lmh-surface-3); --gray-200: var(--lmh-line); --gray-300: var(--lmh-line-strong); --gray-400: var(--lmh-text-3); --gray-500: var(--lmh-text-3); --gray-600: var(--lmh-text-2); --gray-700: var(--lmh-text-2); --gray-800: var(--lmh-text); --gray-900: var(--lmh-text); --blue-50: var(--lmh-primary-tint); --blue-100: var(--lmh-primary-tint-2); --blue-400: var(--lmh-primary-hover); --blue-500: var(--lmh-primary); --blue-600: var(--lmh-primary-active); --green-100: var(--lmh-success-bg); --green-500: var(--lmh-success); --green-600: var(--lmh-success); --amber-100: var(--lmh-warning-bg); --amber-500: var(--lmh-warning); --amber-600: var(--lmh-warning); --red-100: var(--lmh-danger-bg); --red-500: var(--lmh-danger); --red-600: var(--lmh-danger); --gold-50: var(--lmh-warning-bg); --gold-100: var(--lmh-warning-bg); --gold-400: var(--lmh-warning); --gold-500: var(--lmh-warning); --gold-600: var(--lmh-warning); } /* Navy is the brand chrome (sidebar, hero panels). Light keeps the original values; dark tracks the raised surfaces so it is not near-black on near-black. */ :root { --navy-600: #23395c; --navy-700: #1c2f4d; --navy-800: #16263f; --navy-900: #101d33; --navy-950: #0b1626; } :root[data-theme="dark"] { --navy-600: var(--lmh-surface-3); --navy-700: var(--lmh-surface-3); --navy-800: var(--lmh-surface-2); --navy-900: var(--lmh-surface); --navy-950: var(--lmh-bg); } /* --- styles_v74_premium.css: the --p-* system --- */ :root { --p-accent: var(--lmh-primary); --p-accent-hi: var(--lmh-primary-hover); --p-accent-lo: var(--lmh-primary-active); --p-accent-press: var(--lmh-primary-active); --p-accent-tint: var(--lmh-primary-tint); --p-accent-tint-2:var(--lmh-primary-tint-2); --p-accent-ring: var(--lmh-primary-ring); --p-accent-glow: var(--lmh-primary-ring); --p-bg: var(--lmh-bg); --p-surface: var(--lmh-surface); --p-surface-2: var(--lmh-surface-2); --p-surface-3: var(--lmh-surface-3); --p-rail: var(--lmh-rail); --p-hair: var(--lmh-hair); --p-hair-2: var(--lmh-line); --p-divider: var(--lmh-line); --p-text: var(--lmh-text); --p-text-2: var(--lmh-text-2); --p-text-3: var(--lmh-text-3); --p-text-4: var(--lmh-text-3); --p-green: var(--lmh-success); --p-green-bg: var(--lmh-success-bg); --p-green-ring: var(--lmh-success-ring); --p-amber: var(--lmh-warning); --p-amber-bg: var(--lmh-warning-bg); --p-amber-ring: var(--lmh-warning-ring); --p-red: var(--lmh-danger); --p-red-bg: var(--lmh-danger-bg); --p-red-ring: var(--lmh-danger-ring); --p-e0: none; --p-e1: var(--lmh-shadow-1); --p-e2: var(--lmh-shadow-2); --p-e3: var(--lmh-shadow-3); --p-e-chip: 0 0 0 1px var(--lmh-hair), var(--lmh-shadow-1); --p-e-pop: 0 0 0 1px var(--lmh-line), var(--lmh-shadow-3); --p-r-xs: var(--lmh-r-xs); --p-r-sm: var(--lmh-r-sm); --p-r: var(--lmh-r); --p-r-lg: var(--lmh-r-lg); --p-ease: var(--lmh-ease); --p-fast: var(--lmh-fast); --p-med: var(--lmh-med); } /* --- styles_v90_workspace.css --- */ :root { --v90-blue: var(--lmh-primary); --v90-ink: var(--lmh-text); --v90-line: var(--lmh-line); --v90-muted: var(--lmh-text-2); --v90-tint: var(--lmh-surface-2); } /* --- styles_v106.css: declared on .v106 --- */ .v106 { --work-blue: var(--lmh-primary); --work-ink: var(--lmh-text); --work-muted: var(--lmh-text-2); } /* --- styles_v107.css: declared on "#app .content" --- */ #app .content { --c-ink: var(--lmh-text); --c-muted: var(--lmh-text-2); --c-faint: var(--lmh-text-3); --c-blue: var(--lmh-primary); --c-blue-dark: var(--lmh-primary-active); --c-tint: var(--lmh-primary-tint); --c-line: var(--lmh-line); --c-soft: var(--lmh-surface-2); --c-surface: var(--lmh-surface); --c-green: var(--lmh-success); --c-red: var(--lmh-danger); --c-amber: var(--lmh-warning); --text: var(--lmh-text); --muted: var(--lmh-text-2); --border: var(--lmh-line); --card: var(--lmh-surface); } /* --- styles_v108.css: declared on the .p108 scope --- */ #app .content .p108, body:has(#app .app-shell) .p108-overlay { --p-ink: var(--lmh-text); --p-muted: var(--lmh-text-2); --p-blue: var(--lmh-primary); --p-teal: var(--lmh-accent); --p-line: var(--lmh-line); --p-soft: var(--lmh-surface-2); --p-paper: var(--lmh-surface); } /* ============================================================ 4. Dark-mode corrections for blues used as foreground ------------------------------------------------------------ These three variables are read mainly as text colour on a blue tint (--blue-600: 17 colour uses vs 5 background; --p-accent-lo: 4 vs 0; --v90-blue: 6 vs 0). A dark theme inverts the ramp, so the darker end of the blue scale has to become the lighter one or badges and avatar chips render blue-on-blue. The few background uses of --blue-600 are progress-bar fills and a radio dot, which carry no text and only gain contrast from this. ============================================================ */ :root[data-theme="dark"] { --blue-600: var(--lmh-link); --p-accent-lo: var(--lmh-link); --v90-blue: var(--lmh-link); }