/* ========================================================================== Cozy Sites — shared theme tokens (Option A: Trustworthy Professional) Light mode default + dark mode via [data-theme="dark"] on ========================================================================== */ :root { /* Backgrounds */ --bg: #FFFFFF; --bg-alt: #F8F7F4; /* warm off-white for section alternation */ --bg-card: #FFFFFF; --bg-card-solid: #FFFFFF; --bg-warm: #FBFAF7; --nav-bg: rgba(255,255,255,0.85); /* Text */ --text: #0F172A; /* near-black navy */ --text-muted: #475569; /* slate */ --text-subtle: #94A3B8; /* light slate */ /* Accent (trustworthy blue) */ --accent: #2563EB; --accent-dark: #1D4ED8; --accent-soft: rgba(37,99,235,0.08); --accent-glow: rgba(37,99,235,0.12); --accent-secondary: #1D4ED8; /* Success / pricing highlight (emerald) */ --success: #059669; --green: #059669; --success-soft: rgba(5,150,105,0.08); /* Lines & shadows */ --border: #E2E8F0; --border-hover: #CBD5E1; --shadow-sm: 0 1px 3px rgba(15,23,42,0.04), 0 1px 2px rgba(15,23,42,0.06); --shadow-md: 0 4px 12px rgba(15,23,42,0.05), 0 2px 6px rgba(15,23,42,0.04); --shadow-lg: 0 20px 40px rgba(15,23,42,0.08), 0 8px 16px rgba(15,23,42,0.04); --card-shadow: var(--shadow-md); /* Particle legacy tokens (kept for backward-compat with old index.html) */ --particle-a: 37,99,235; --particle-b: 5,150,105; --line-alpha: 0.05; --glow-color: rgba(37,99,235,0.06); /* Theme toggle icon colors */ --toggle-bg: #F1F5F9; --toggle-fg: #0F172A; } :root[data-theme="dark"] { /* Backgrounds */ --bg: #0A0A0B; /* warmer than pure black */ --bg-alt: #111113; --bg-card: #17171A; --bg-card-solid: #17171A; --bg-warm: #131316; --nav-bg: rgba(10,10,11,0.85); /* Text */ --text: #FAFAFA; --text-muted: #A1A1AA; --text-subtle: #71717A; /* Accent (slightly brighter blue for dark-mode contrast) */ --accent: #3B82F6; --accent-dark: #2563EB; --accent-soft: rgba(59,130,246,0.12); --accent-glow: rgba(59,130,246,0.18); --accent-secondary: #60A5FA; /* Success (slightly brighter emerald) */ --success: #10B981; --green: #10B981; --success-soft: rgba(16,185,129,0.12); /* Lines & shadows */ --border: rgba(255,255,255,0.08); --border-hover: rgba(255,255,255,0.16); --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.4); --shadow-lg: 0 20px 40px rgba(0,0,0,0.5), 0 8px 16px rgba(0,0,0,0.3); --card-shadow: var(--shadow-md); --particle-a: 59,130,246; --particle-b: 16,185,129; --line-alpha: 0.08; --glow-color: rgba(59,130,246,0.08); --toggle-bg: #1E1E22; --toggle-fg: #FAFAFA; } /* Smooth theme transitions */ html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } body, nav, footer, section, header, aside, article, main, .card, [class*="card"], [class*="panel"], [class*="btn"] { transition: background-color .2s ease, border-color .2s ease, color .2s ease; } /* ========================================================================== Theme toggle button (sun / moon) ========================================================================== */ .theme-toggle { background: var(--toggle-bg); border: 1px solid var(--border); color: var(--toggle-fg); width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: all .2s; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }