/* ============================================================================= * Invested light theme — refined platform-wide light surface * ----------------------------------------------------------------------------- * Apply by adding the `invested-theme-light` class (or * `data-invested-theme="light"` attribute) to a wrapper element. * * Scoped to a class so legacy `:root` brand variables in `css-vars.css` * (kiosk landing, fastlegepro CE-cleared UI) remain untouched. * * Theme-invariant tokens (typography, spacing, radius, border widths, blur, * transitions, z-index) live in `css-vars.css` on `:root`. This file only * carries the colours, shadows, focus colour and gradients that actually * differ from dark mode. A component built against the `--invested-*` tokens * therefore flips themes by changing the wrapper class — no per-component * theme code required. * ===========================================================================*/ .invested-theme-light, [data-invested-theme='light'] { /* --------------------------------------------------------------------------- * Brand accents — same controlled violet/indigo as dark. * -------------------------------------------------------------------------*/ --invested-indigo: #4f46e5; --invested-indigo-rgb: 79 70 229; --invested-indigo-bright: #6366f1; --invested-indigo-bright-rgb: 99 102 241; --invested-indigo-deep: #3730a3; --invested-indigo-deep-rgb: 55 48 163; --invested-indigo-darker: #4338ca; --invested-indigo-darker-rgb: 67 56 202; --invested-sky: #2563eb; --invested-sky-rgb: 37 99 235; --invested-sky-soft: #3b82f6; --invested-sky-soft-rgb: 59 130 246; /* --------------------------------------------------------------------------- * Background layers — soft clinical off-white → calm cool greys * -------------------------------------------------------------------------*/ --invested-bg-base: #f7f8fb; --invested-bg-base-rgb: 247 248 251; --invested-bg-mid: #f1f3f8; --invested-bg-mid-rgb: 241 243 248; --invested-bg-deep: #e8ecf3; --invested-bg-deep-rgb: 232 236 243; --invested-bg-raised: #ffffff; --invested-bg-raised-rgb: 255 255 255; --invested-bg-sunken: #eef0f5; --invested-bg-sunken-rgb: 238 240 245; /* --------------------------------------------------------------------------- * Elevation surfaces (translucent over the canvas) * -------------------------------------------------------------------------*/ --invested-bg-elevated: rgba(255, 255, 255, 0.65); --invested-bg-elevated-hover: rgba(255, 255, 255, 0.80); --invested-bg-elevated-strong: rgba(255, 255, 255, 0.92); --invested-glass-tint-low: rgba(255, 255, 255, 0.55); --invested-glass-tint-mid: rgba(255, 255, 255, 0.70); --invested-glass-tint-high: rgba(255, 255, 255, 0.85); /* --------------------------------------------------------------------------- * Borders / dividers — calm grey-blue * -------------------------------------------------------------------------*/ --invested-border-subtle: rgba(15, 23, 42, 0.06); --invested-border-default: rgba(15, 23, 42, 0.10); --invested-border-strong: rgba(15, 23, 42, 0.16); --invested-border-hairline: rgba(15, 23, 42, 0.04); --invested-border-indigo: rgba(79, 70, 229, 0.55); --invested-border-indigo-soft: rgba(79, 70, 229, 0.22); /* --------------------------------------------------------------------------- * Text — dark readable, calm hierarchy * ----------------------------------------------------------------------------- * All five tiers deliberately exceed WCAG AA on the platform light canvas * (`#f7f8fb`): * primary #0B1226 → 17.6:1 * secondary #364152 → 9.0:1 * muted #5B6678 → 5.6:1 (above 4.5:1 normal-text minimum) * subtle #6F7A8E → 4.5:1 (kept JUST above AA for hint text) * inverse #F5F4F1 — used on dark accent fills only * -------------------------------------------------------------------------*/ --invested-text-primary: #0b1226; --invested-text-primary-rgb: 11 18 38; --invested-text-secondary: #364152; --invested-text-secondary-rgb: 54 65 82; --invested-text-muted: #5b6678; --invested-text-muted-rgb: 91 102 120; /* Subtle bumped from #7C8699 (≈4.0:1) to #6F7A8E (≈4.5:1) so hint text * still meets AA on the light canvas. */ --invested-text-subtle: #6f7a8e; --invested-text-subtle-rgb: 111 122 142; --invested-text-faint: rgba(11, 18, 38, 0.35); --invested-text-inverse: #f5f4f1; --invested-text-inverse-rgb: 245 244 241; /* --------------------------------------------------------------------------- * Semantic — restrained, professional (deeper hues for legibility on light) * -------------------------------------------------------------------------*/ --invested-success: #059669; --invested-success-rgb: 5 150 105; --invested-success-soft: rgba(5, 150, 105, 0.10); --invested-warning: #b45309; --invested-warning-rgb: 180 83 9; --invested-warning-soft: rgba(180, 83, 9, 0.10); --invested-danger: #b91c1c; --invested-danger-rgb: 185 28 28; --invested-danger-soft: rgba(185, 28, 28, 0.10); --invested-info: #2563eb; --invested-info-rgb: 37 99 235; --invested-info-soft: rgba(37, 99, 235, 0.10); /* --------------------------------------------------------------------------- * Shadows — softer for light surfaces * -------------------------------------------------------------------------*/ --invested-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --invested-shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.06); --invested-shadow-lg: 0 10px 30px -10px rgba(15, 23, 42, 0.10); --invested-shadow-xl: 0 20px 60px -20px rgba(15, 23, 42, 0.14); --invested-shadow-glass: inset 0 1px 0 0 rgba(255, 255, 255, 0.80), 0 10px 30px -15px rgba(15, 23, 42, 0.10); --invested-shadow-card: 0 1px 0 0 rgba(15, 23, 42, 0.02) inset, 0 12px 32px -16px rgba(15, 23, 42, 0.12); --invested-glow-indigo-soft: 0 0 18px -6px rgba(99, 102, 241, 0.40), 0 4px 10px -4px rgba(15, 23, 42, 0.08); --invested-glow-indigo-strong: 0 0 30px -8px rgba(99, 102, 241, 0.45), 0 8px 24px -8px rgba(15, 23, 42, 0.10); --invested-glow-indigo-button: 0 0 24px -8px rgba(99, 102, 241, 0.45), 0 10px 24px -10px rgba(15, 23, 42, 0.18); --invested-glow-indigo-button-hover: 0 0 32px -8px rgba(99, 102, 241, 0.55), 0 12px 28px -10px rgba(15, 23, 42, 0.22); /* --------------------------------------------------------------------------- * Focus ring colour (sizing comes from :root) * -------------------------------------------------------------------------*/ --invested-focus-ring-color: rgba(79, 70, 229, 0.85); --invested-focus-ring-color-soft: rgba(79, 70, 229, 0.32); --invested-focus-ring-shadow: 0 0 0 var(--invested-focus-ring-offset) var(--invested-bg-base), 0 0 0 calc(var(--invested-focus-ring-width) + var(--invested-focus-ring-offset)) var(--invested-focus-ring-color); /* --------------------------------------------------------------------------- * Composite gradients * -------------------------------------------------------------------------*/ --invested-gradient-primary: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%); --invested-gradient-primary-hover: linear-gradient(135deg, #4f46e5 0%, #4338ca 60%, #3730a3 100%); --invested-gradient-canvas: radial-gradient(ellipse at top, rgba(99, 102, 241, 0.10) 0%, rgba(247, 248, 251, 0) 55%), linear-gradient(180deg, #f7f8fb 0%, #f1f3f8 100%); --invested-gradient-canvas-quiet: linear-gradient(180deg, #f7f8fb 0%, #eef0f5 100%); --invested-gradient-hairline-x: linear-gradient(90deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.10) 50%, rgba(15, 23, 42, 0) 100%); } /* When the light theme is applied to a full-viewport surface, opt the consumer * into the canvas gradient + base colour scheme. */ .invested-theme-light--canvas, [data-invested-theme='light'][data-invested-canvas='true'] { background: var(--invested-gradient-canvas); color: var(--invested-text-primary); color-scheme: light; } .invested-theme-light--canvas-quiet, [data-invested-theme='light'][data-invested-canvas='quiet'] { background: var(--invested-gradient-canvas-quiet); color: var(--invested-text-primary); color-scheme: light; }