/** * Datarket — theme tokens (map + catalog + shell header). * Default = original slate / cyan. Use to switch. * * Light globals follow `dashboards/designs/V11/light_theme/audit/` (surface, glass, * shadows, wordmark, nav active). Strata / Precision Lens accents in DESIGN.md. */ :root { color-scheme: dark; --dc-wordmark: #38bdf8; /* Shared semantic ramps (Strata-aligned; dark + light override as needed) */ --dc-primary-mid: #22b1ec; --dc-primary-deep: #0369a1; --dc-on-primary: #002b3d; --dc-tertiary: #f59e0b; --dc-tertiary-strong: #ea580c; --dc-bg-base: #020617; --dc-bg-panel: rgba(15, 23, 42, 0.92); --dc-primary: #38bdf8; --dc-text-main: #f8fafc; --dc-text-muted: #94a3b8; --dc-border: rgba(51, 65, 85, 0.5); --dc-accent-hover: rgba(56, 189, 248, 0.1); --dc-map-search-idle-bg: rgba(148, 163, 184, 0.12); --dc-map-search-idle-border: rgba(148, 163, 184, 0.18); --dc-map-search-hover-bg: rgba(148, 163, 184, 0.26); --dc-map-search-hover-border: rgba(148, 163, 184, 0.38); --dc-map-search-active-shadow: 0 2px 16px rgba(56, 189, 248, 0.38); --dc-glass-blur: 16px; --dc-header-h: 64px; --dc-safe-top: calc(var(--dc-header-h) + 28px); --dc-panel-w: 320px; --dc-shadow-float: 0 8px 32px rgba(0, 0, 0, 0.3); --dc-scrollbar-thumb: rgba(148, 163, 184, 0.38); --dc-scrollbar-thumb-hover: rgba(56, 189, 248, 0.5); --dc-scrollbar-track: rgba(15, 23, 42, 0.72); --dc-attr-dock-offset: 0px; /* Shared header + account menu (shell-header.css) */ --dc-header-surface: rgba(15, 23, 42, 0.85); --dc-header-border: rgba(51, 65, 85, 0.5); --dc-account-menu-bg: rgba(15, 23, 42, 0.96); --dc-account-menu-border: rgba(56, 189, 248, 0.24); --dc-account-menu-shadow: 0 12px 28px rgba(2, 8, 23, 0.55); --dc-account-menu-header-color: #cbd5e1; --dc-account-menu-header-border: rgba(71, 85, 105, 0.42); --dc-account-menu-item-color: #e2e8f0; --dc-account-menu-item-hover: rgba(30, 41, 59, 0.8); /* Catalog page (catalog.css) */ --dc-bg: #060e20; --dc-text: #dee5ff; --dc-muted: #a3aac4; --dc-accent: #3bbffa; --dc-panel: rgba(15, 25, 48, 0.72); } /* Dark — deeper blacks (Settings → Theme → “Dark” / Night mission). Distinct from :root default slate. */ html[data-theme="dark"] { color-scheme: dark; --dc-wordmark: #38bdf8; --dc-bg-base: #010409; --dc-bg-panel: rgba(3, 7, 18, 0.94); --dc-primary: #38bdf8; --dc-text-main: #f8fafc; --dc-text-muted: #8b9cb3; --dc-border: rgba(30, 41, 59, 0.72); --dc-accent-hover: rgba(56, 189, 248, 0.14); --dc-map-search-idle-bg: rgba(148, 163, 184, 0.1); --dc-map-search-idle-border: rgba(148, 163, 184, 0.16); --dc-map-search-hover-bg: rgba(148, 163, 184, 0.22); --dc-map-search-hover-border: rgba(148, 163, 184, 0.34); --dc-map-search-active-shadow: 0 2px 18px rgba(56, 189, 248, 0.42); --dc-shadow-float: 0 12px 40px rgba(0, 0, 0, 0.55); --dc-scrollbar-thumb: rgba(148, 163, 184, 0.42); --dc-scrollbar-thumb-hover: rgba(56, 189, 248, 0.55); --dc-scrollbar-track: rgba(1, 4, 9, 0.88); --dc-header-surface: rgba(3, 7, 18, 0.9); --dc-header-border: rgba(51, 65, 85, 0.58); --dc-account-menu-bg: rgba(3, 7, 18, 0.98); --dc-account-menu-border: rgba(56, 189, 248, 0.28); --dc-account-menu-shadow: 0 16px 36px rgba(0, 0, 0, 0.65); --dc-account-menu-header-color: #cbd5e1; --dc-account-menu-header-border: rgba(71, 85, 105, 0.5); --dc-account-menu-item-color: #e2e8f0; --dc-account-menu-item-hover: rgba(30, 41, 59, 0.85); --dc-bg: #030712; --dc-text: #e8eefc; --dc-muted: #94a3b8; --dc-accent: #38bdf8; --dc-panel: rgba(15, 23, 42, 0.82); } /* Light — V11 audit: Slate 50 base, white/80 glass, slate-200/50 edges, whisper shadows */ html[data-theme="light"] { color-scheme: light; --dc-wordmark: #0f172a; --dc-primary: #38bdf8; --dc-nav-active: #0284c7; --dc-primary-mid: #22b1ec; --dc-primary-deep: #0284c7; --dc-on-primary: #ffffff; --dc-bg-base: #f8fafc; --dc-bg-panel: rgba(255, 255, 255, 0.8); --dc-text-main: #0f172a; --dc-text-muted: #64748b; --dc-border: rgba(226, 232, 240, 0.5); --dc-accent-hover: rgba(56, 189, 248, 0.12); --dc-map-search-idle-bg: rgba(241, 245, 249, 0.95); --dc-map-search-idle-border: rgba(226, 232, 240, 0.6); --dc-map-search-hover-bg: #ffffff; --dc-map-search-hover-border: rgba(226, 232, 240, 0.85); --dc-map-search-active-shadow: 0 2px 20px rgba(56, 189, 248, 0.2); --dc-shadow-float: 0 8px 32px rgba(25, 28, 30, 0.06); --dc-glass-blur: 20px; --dc-scrollbar-thumb: rgba(100, 116, 139, 0.4); --dc-scrollbar-thumb-hover: rgba(56, 189, 248, 0.45); --dc-scrollbar-track: rgba(248, 250, 252, 0.9); --dc-header-surface: rgba(255, 255, 255, 0.9); --dc-header-border: rgba(226, 232, 240, 0.5); --dc-account-menu-bg: rgba(255, 255, 255, 0.96); --dc-account-menu-border: rgba(226, 232, 240, 0.55); --dc-account-menu-shadow: 0 8px 32px rgba(148, 163, 184, 0.22); --dc-account-menu-header-color: #475569; --dc-account-menu-header-border: rgba(226, 232, 240, 0.6); --dc-account-menu-item-color: #0f172a; --dc-account-menu-item-hover: rgba(56, 189, 248, 0.1); --dc-bg: #f8fafc; --dc-text: #0f172a; --dc-muted: #64748b; --dc-accent: #38bdf8; --dc-panel: rgba(255, 255, 255, 0.8); } html[data-theme="light"] .dc-catalog-search:focus-within { border-color: rgba(2, 132, 199, 0.35); box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2); } /* Audit §2: chrome icons ≈ 70% primary text, full on hover */ html[data-theme="light"] .dc-icon-btn:not(:disabled) { color: rgba(15, 23, 42, 0.7); } html[data-theme="light"] .dc-icon-btn:not(:disabled):hover { color: var(--dc-text-main); }