/* InfoMind — Theme variables (light & dark) */ /* Attach attribute on : data-theme="light" | "dark" */ :root{ /* DARK (default) */ --bg: #0b1220; --bg-soft: #101a2f; --card: #0f1a30; --text: #ecf2ff; --muted: #b9c2d0; --brand: #6ee7ff; --brand-2: #8b5cf6; --accent: #22d3ee; --ok:#34d399; --warn:#f59e0b; --shadow: 0 10px 30px rgba(0,0,0,.3); } /* LIGHT palette (like the version you liked) */ html[data-theme="light"]{ --bg: #f6f8fb; /* page background */ --bg-soft: #ffffff; /* soft background / header glass */ --card: #ffffff; /* cards */ --text: #0b1220; /* main text */ --muted: #475569; /* secondary text */ --brand: #0ea5e9; /* primary accent */ --brand-2: #7c3aed; /* secondary accent */ --accent: #0891b2; /* pills/links */ --shadow: 0 8px 24px rgba(2,6,23,.08); } /* Optional helpers so existing components react automatically */ body{ background: linear-gradient(180deg,var(--bg),var(--bg-soft)); color: var(--text); } header{ background: color-mix(in oklab, var(--bg-soft) 80%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--text) 10%, transparent); } .card{ background: var(--card); border: 1px solid color-mix(in oklab, var(--text) 10%, transparent); box-shadow: var(--shadow); } .btn{ background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 80%, transparent), color-mix(in oklab, var(--brand-2) 70%, transparent)); color: #001726; } .pill{ background: color-mix(in oklab, var(--accent) 20%, transparent); border: 1px solid color-mix(in oklab, var(--text) 14%, transparent); color: var(--text); } .nav-links a:hover{ background: color-mix(in oklab, var(--text) 10%, transparent); } /* Respect prefers-color-scheme on first visit (before JS runs) */ @media (prefers-color-scheme: light){ :root:not([data-theme]){ --bg: #f6f8fb; --bg-soft: #ffffff; --card: #ffffff; --text: #0b1220; --muted: #475569; --brand: #0ea5e9; --brand-2: #7c3aed; --accent: #0891b2; --shadow: 0 8px 24px rgba(2,6,23,.08); } }