/* Solvia theme — "Meridian" cool-SaaS palette (cool graphite neutral + indigo-blue brand accent). Cool light is the default; cool slate dark applies under [data-theme="dark"]. Applied via [data-theme] attribute on . Toggle lives in index.html nav. FOUC snippet in every page stamps the attribute before first paint. Variable names are unchanged across palette revisions so every existing page picks up the new colors with no markup edits. */ :root, :root[data-theme="light"] { color-scheme: light; /* surfaces — cool off-white canvas, pure-white cards */ --bg: #f4f6f9; --bg2: #ffffff; --bg3: #eceff3; --bg4: #dde2ea; /* borders */ --brd: #e3e8ee; --brd2: #cbd3dd; /* text — graphite */ --txt: #1a2230; --txt2: #586172; --txt3: #949dac; /* accents */ --blue: #3b82f6; --green: #18a558; --red: #e5484d; --orange: #e08c3b; --purple: #7c6ce0; --cyan: #0ea5b7; --yellow: #d9a420; --accent: #3d63dd; /* indigo-blue brand accent */ --accent2: #7c6ce0; /* violet — preview badge / map dot */ --on-accent: #ffffff; /* shadows + overlays — cool neutral cast */ --shadow-md: 0 4px 12px rgba(18,28,45,.08); --shadow-lg: 0 10px 28px rgba(18,28,45,.14); --shadow-xl: 0 16px 40px rgba(18,28,45,.20); /* tile gradient (closer-home) */ --tile-grad-1: #ffffff; --tile-grad-2: #eceff3; } :root[data-theme="dark"] { color-scheme: dark; /* surfaces — true slate */ --bg: #0f141b; --bg2: #181f29; --bg3: #212a36; --bg4: #2c3744; /* borders */ --brd: #28323f; --brd2: #44505f; /* text */ --txt: #e7ebf1; --txt2: #9aa5b4; --txt3: #687385; /* accents */ --blue: #5b9bf8; --green: #3ec27e; --red: #f06d72; --orange: #eaa45c; --purple: #9c8ef0; --cyan: #34c5d6; --yellow: #e3bd52; --accent: #6f8ef5; --accent2: #9c8ef0; --on-accent: #0f141b; /* shadows + overlays */ --shadow-md: 0 4px 12px rgba(0,0,0,.40); --shadow-lg: 0 10px 28px rgba(0,0,0,.50); --shadow-xl: 0 16px 40px rgba(0,0,0,.60); /* tile gradient */ --tile-grad-1: #181f29; --tile-grad-2: #0f141b; } /* Derived tints + interaction colors — defined once; var() resolves against whichever theme's base colors are active, so these track light/dark for free. (Lower specificity than the per-theme blocks above, but they set different variables, so there is no conflict.) */ :root { --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent); --accent-line: color-mix(in srgb, var(--accent) 30%, transparent); --blue-soft: color-mix(in srgb, var(--blue) 14%, transparent); --blue-line: color-mix(in srgb, var(--blue) 32%, transparent); --green-soft: color-mix(in srgb, var(--green) 14%, transparent); --green-line: color-mix(in srgb, var(--green) 32%, transparent); --red-soft: color-mix(in srgb, var(--red) 14%, transparent); --red-line: color-mix(in srgb, var(--red) 32%, transparent); --orange-soft: color-mix(in srgb, var(--orange) 15%, transparent); --orange-line: color-mix(in srgb, var(--orange) 32%, transparent); --purple-soft: color-mix(in srgb, var(--purple) 14%, transparent); --purple-line: color-mix(in srgb, var(--purple) 32%, transparent); --cyan-soft: color-mix(in srgb, var(--cyan) 14%, transparent); --cyan-line: color-mix(in srgb, var(--cyan) 32%, transparent); --yellow-soft: color-mix(in srgb, var(--yellow) 16%, transparent); --yellow-line: color-mix(in srgb, var(--yellow) 32%, transparent); --muted-soft: color-mix(in srgb, var(--txt3) 14%, transparent); --muted-line: color-mix(in srgb, var(--txt3) 28%, transparent); --row-hover: color-mix(in srgb, var(--txt) 4%, transparent); --row-hover-strong: color-mix(in srgb, var(--red) 8%, transparent); --row-divider: color-mix(in srgb, var(--txt) 8%, transparent); --tab-active-bg: var(--accent-soft); /* ── scales (added for the polished component system) ── */ --r-sm: 6px; --r-md: 9px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --fs-meta: 11px; --fs-sm: 12px; --fs-body: 13px; --fs-h3: 15px; --fs-h2: 17px; --fs-h1: 20px; --fw-med: 600; --fw-bold: 700; --fw-strong: 760; --ease: .16s cubic-bezier(.4,0,.2,1); --z-dropdown: 30; --z-drawer: 41; --z-modal: 60; --z-toast: 2147483647; }