/* ============================================================= * Lucidity Design System 2026 — SHARED THEME (single source of truth) * Linked LAST in on every page so these :root tokens win the * cascade over each page's inline block. Retire the inline :root blocks * page-by-page later; this file is intentionally additive & non-breaking. * * v2 "deeper" palette: brand green kept (Lucidity), but surfaces, text and * secondary accents are enriched so the UI reads less washed-out — same * family, no added distraction. Plus a11y (focus-visible, reduced-motion) * and legacy var aliases so the old-palette pages (access-manager, legal) * adopt the system without markup changes. * ============================================================= */ :root { /* ---- Fonts ---- */ --font: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif; --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ---- Surfaces (deeper + more elevation separation to kill the "flat/washed" feel) ---- */ --bg: #050D1A; --card: #080F1E; --card2: #080F1E; --surface: #080F1E; --surface-2: #080F1E; /* ---- Borders (stronger for definition; washed-out was partly low edge contrast) ---- */ --border: rgba(255,255,255,.07); --b1: #2C2C2C; --b2: #3D3D3D; /* ---- Text (crisper hierarchy; muted brought up to pass AA and feel richer) ---- */ --t1: #F8F8F8; --text: #F8F8F8; --t2: #B4B4B4; --muted: #B4B4B4; --t3: #5C5C5C; --t4: #2C2C2C; /* ---- Brand + accents (green kept; secondaries deepened, same family) ---- */ --accent: #8AEC64; /* Lucidity brand green — unchanged */ --green: #8AEC64; --accent-strong: #74CC51; --emerald: #64ECC6; --blue: #92CAFE; --indigo: #648AEC; --violet: #8F93F9; --cyan: #10D6E0; --amber: #F2A521; --red: #E93A3A; --rose: #f43f5e; /* ---- Radii / shadows / motion ---- */ --r: 16px; --r2: 10px; --r3: 8px; --radius: 10px; --shadow-1: 0 1px 2px rgba(0,0,0,.35); --shadow-2: 0 6px 20px rgba(0,0,0,.38); --shadow-3: 0 18px 46px rgba(0,0,0,.50); --ease: cubic-bezier(.2,.8,.2,1); /* ---- Data-viz palette (deepened; charts can read these) ---- */ --dv-1: #8AEC64; --dv-2: #92CAFE; --dv-3: #648AEC; --dv-4: #8F93F9; --dv-5: #3A41D6; --dv-6: #10D6E0; --dv-7: #0C9AA2; --dv-8: #64ECC6; --dv-9: #E93A3A; --dv-10: #F07E1E; --dv-11: #E6B10F; --dv-12: #D169E6; /* ============================================================= * Legacy aliases — old var names → new tokens, so access-manager.html * and legal.html (and any older page) adopt the 2026 palette with NO * markup change once they link this sheet. * ============================================================= */ --primary: var(--accent); --primary-strong: var(--accent-strong); --white: var(--card); /* old "white" surface name */ --ink: var(--t1); --line: var(--border); --danger: var(--red); --warn: var(--amber); --ok: var(--accent); /* complete the green flip for legal/access-manager (were still emerald #10b981) */ --primary-soft: rgba(138, 236, 100, .14); --primary-dark: var(--accent-strong); --grad: linear-gradient(135deg, var(--accent), var(--accent-strong)); } /* ============================================================= * Base + accessibility (applies everywhere via the shared link) * ============================================================= */ /* Visible keyboard focus on the near-black theme (was missing app-wide). */ :where(a, button, input, select, textarea, [tabindex], summary, [role="button"], [role="tab"]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* Respect reduced-motion: stop ambient orbs, marquee strips, spinners. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* Shared utilities (opt-in; additive) */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .skeleton { background: linear-gradient(90deg, var(--card2) 25%, #2b2b34 37%, var(--card2) 63%); background-size: 400% 100%; animation: lc-shimmer 1.2s ease-in-out infinite; border-radius: var(--r3); } @keyframes lc-shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} } .empty-state, .error-state { text-align: center; color: var(--muted); padding: 32px 16px; font-size: 13px; } .error-state { color: var(--red); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }