/* Snow Dashboard UI Kit — design tokens extracted from Figma (get_variable_defs) Source: Snow-Dashboard-UI-Kit (Community), node 98469:145264 These are the kit's real library variables, names preserved. */ :root{ /* neutrals */ --black-100:#1C1C1C; --black-80: rgba(28,28,28,.80); --black-40: #1c1c1c66; --black-20: #1c1c1c33; --black-10: #1c1c1c1a; --black-5: #1c1c1c0d; --white-100:#FFFFFF; --white-40: #ffffff66; /* primary surfaces / accents */ --primary-brand: #1c1c1c; --primary-blue: #e3f5ff; /* Customers / Views accent card */ --primary-purple: #e5ecf6; /* Growth / Active Users accent card */ --primary-light: #f7f9fb; /* default card surface */ /* secondary data-viz palette */ --secondary-cyan: #a8c5da; --secondary-indigo: #95a4fc; --secondary-mint: #baedbd; --secondary-blue: #b1e3ff; --secondary-green: #a1e3cb; /* logo */ --logo: #7094f4; --logo-2: #4f507f; /* radius + spacing scale */ --r8:8px; --s4:4px; --s8:8px; --s12:12px; --s16:16px; --s20:20px; --s24:24px; --s28:28px; --s40:40px; --s48:48px; --s80:80px; /* type: Inter — 12 Regular(lh18), 14 Regular(lh20), 14 Semibold, 24 Semibold(lh36) */ /* semantic surfaces (theme-aware): pages may use these instead of literal white. In light they map to the kit values; the dark block below remaps them. */ --canvas: #ffffff; /* app background (body) */ --surface: #ffffff; /* card / panel background (bg-white) */ --pop: #ffffff; /* popover / modal background */ --accent: #1c1c1c; /* primary button bg (bg-ink) */ --accent-fg:#ffffff; /* primary button text (text-white) */ color-scheme: light; } /* ============================================================ DARK THEME — flips the kit tokens + the literal Tailwind utilities the pages use (bg-white / bg-ink / text-white / bg-black/5 / hover). Activated by data-theme="dark" on (set pre-paint by the head bootstrap; toggled by the sun control). White is the default. ============================================================ */ :root[data-theme="dark"]{ color-scheme: dark; /* neutrals — "ink"/black-* become light so text + borders adapt automatically */ --black-100:#E6E7EA; --black-80: rgba(230,231,234,.80); --black-40: rgba(230,231,234,.56); --black-20: rgba(230,231,234,.34); --black-10: rgba(255,255,255,.12); --black-5: rgba(255,255,255,.06); /* surfaces */ --canvas: #0E1014; --surface: #181B20; --pop: #1F232A; --primary-light:#181B20; /* .surface cards */ --primary-brand:#E6E7EA; /* KPI accent cards — muted dark tints (still distinct, text stays readable) */ --primary-blue: #16303B; --primary-purple:#23283A; /* primary (ink) button inverts to a light chip with dark text */ --accent: #E6E7EA; --accent-fg:#14161B; /* data-viz palette is kept — those hues read fine on dark. */ } /* literal utility overrides (only under dark; light is untouched) */ :root[data-theme="dark"] body{ background:var(--canvas); color:var(--black-100); } :root[data-theme="dark"] .bg-white{ background:var(--surface); } :root[data-theme="dark"] body.bg-white{ background:var(--canvas); } /* body wins over cards */ :root[data-theme="dark"] .bg-ink{ background:var(--accent); } :root[data-theme="dark"] .bg-ink, :root[data-theme="dark"] .bg-ink *{ color:var(--accent-fg); } /* beats text-white inside primary buttons */ :root[data-theme="dark"] .bg-black\/5{ background:rgba(255,255,255,.06); } :root[data-theme="dark"] .hover\:bg-black\/5:hover{ background:rgba(255,255,255,.07); } :root[data-theme="dark"] .hover\:bg-black\/10:hover{ background:rgba(255,255,255,.10); } /* form controls + placeholders */ :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select{ background:transparent; color:var(--black-100); } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder{ color:var(--black-40); } /* floating scrollbar flips to light alpha */ :root[data-theme="dark"] *{ scrollbar-color:rgba(255,255,255,.10) transparent; } :root[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.10); background-clip:content-box; } :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.20); background-clip:content-box; }