/* Solvia theme — dark default + light override. Applied via [data-theme] attribute on . Toggle lives in index.html nav. FOUC snippet in every page stamps the attribute before first paint. */ :root { color-scheme: dark; /* surfaces */ --bg: #0d1117; --bg2: #161b22; --bg3: #21262d; --bg4: #30363d; /* borders */ --brd: #30363d; --brd2: #484f58; /* text */ --txt: #e6edf3; --txt2: #8b949e; --txt3: #6e7681; /* accents */ --blue: #58a6ff; --green: #3fb950; --red: #f85149; --orange: #ffa657; --purple: #bc8cff; --cyan: #39d353; --yellow: #f0b400; --accent: #d97757; /* brand orange — logo / open trigger */ --accent2: #a371f7; /* preview badge / map dot */ /* on-accent text color (text painted on top of a saturated accent fill) */ --on-accent: #0d1117; /* soft tints — pre-baked semi-transparent versions of each accent (use for chip backgrounds) */ --blue-soft: rgba(88,166,255,.16); --blue-line: rgba(88,166,255,.32); --green-soft: rgba(63,185,80,.16); --green-line: rgba(63,185,80,.32); --red-soft: rgba(248,81,73,.16); --red-line: rgba(248,81,73,.32); --orange-soft: rgba(255,166,87,.16); --orange-line: rgba(255,166,87,.32); --purple-soft: rgba(188,140,255,.16); --purple-line: rgba(188,140,255,.32); --yellow-soft: rgba(240,180,0,.16); --yellow-line: rgba(240,180,0,.32); --cyan-soft: rgba(57,211,83,.16); --cyan-line: rgba(57,211,83,.32); --muted-soft: rgba(139,148,158,.14); --muted-line: rgba(139,148,158,.28); --accent-soft: rgba(217,119,87,.16); --accent-line: rgba(217,119,87,.32); /* shadows + overlays */ --shadow-md: 0 4px 12px rgba(0,0,0,.3); --shadow-lg: 0 8px 24px rgba(0,0,0,.4); --shadow-xl: 0 12px 32px rgba(0,0,0,.5); --row-hover: rgba(255,255,255,.03); --row-hover-strong: rgba(255,80,80,.06); --row-divider: rgba(255,255,255,.04); /* tile gradient (closer-home) */ --tile-grad-1: #1b222b; --tile-grad-2: #151a21; /* tab-active backdrop (used in index.html .tab-item.active) */ --tab-active-bg: rgba(31,58,95,.4); } :root[data-theme="light"] { color-scheme: light; /* surfaces */ --bg: #ffffff; --bg2: #f6f8fa; --bg3: #eaeef2; --bg4: #d0d7de; /* borders */ --brd: #d0d7de; --brd2: #afb8c1; /* text */ --txt: #1f2328; --txt2: #656d76; --txt3: #848d97; /* accents */ --blue: #0969da; --green: #1a7f37; --red: #cf222e; --orange: #9a6700; --purple: #8250df; --cyan: #1f883d; --yellow: #bf8700; --accent: #bc4c00; --accent2: #6639ba; --on-accent: #ffffff; /* soft tints — lighter alpha on white reads cleanly without washing out */ --blue-soft: rgba(9,105,218,.10); --blue-line: rgba(9,105,218,.25); --green-soft: rgba(26,127,55,.10); --green-line: rgba(26,127,55,.25); --red-soft: rgba(207,34,46,.10); --red-line: rgba(207,34,46,.25); --orange-soft: rgba(154,103,0,.10); --orange-line: rgba(154,103,0,.25); --purple-soft: rgba(130,80,223,.10); --purple-line: rgba(130,80,223,.25); --yellow-soft: rgba(191,135,0,.12); --yellow-line: rgba(191,135,0,.25); --cyan-soft: rgba(31,136,61,.10); --cyan-line: rgba(31,136,61,.25); --muted-soft: rgba(101,109,118,.10); --muted-line: rgba(101,109,118,.22); --accent-soft: rgba(188,76,0,.10); --accent-line: rgba(188,76,0,.25); /* shadows + overlays */ --shadow-md: 0 4px 12px rgba(140,149,159,.18); --shadow-lg: 0 8px 24px rgba(140,149,159,.25); --shadow-xl: 0 12px 32px rgba(140,149,159,.35); --row-hover: rgba(31,35,40,.04); --row-hover-strong: rgba(207,34,46,.07); --row-divider: rgba(31,35,40,.05); /* tile gradient */ --tile-grad-1: #f6f8fa; --tile-grad-2: #eaeef2; /* tab-active backdrop */ --tab-active-bg: rgba(9,105,218,.10); }