/* theme.css — Accent + Light/Dark Theme Switcher - Accent color is set via Admin → Settings → Theme Accent Color (injected in ) - Theme mode is set via Admin → Settings → Theme Mode (light/dark/auto) Dark is the default look (from styles.css tokens). Light overrides tokens below. */ /* Compatibility tokens (older rules) */ :root{ --orange: var(--accent); --orange-2: var(--accent-2); } /* ---------- LIGHT THEME ---------- */ html[data-theme="light"]{ --page-bg: #ffffff; --text: #0b0b0b; --muted: #555; --line: rgba(0, 0, 0, .12); --shadow: 0 14px 40px rgba(0, 0, 0, .08); --topbar-bg: #ffffff; --header-bg: rgba(255,255,255,.92); --card-bg: #ffffff; --card2-bg: #ffffff; --chip-bg: #ffffff; --hover-bg: rgba(0,0,0,.04); --input-bg: #ffffff; --lead: #2b2b2b; --hero-overlay: linear-gradient( to bottom, rgba(255,255,255,.96), rgba(255,255,255,.18), rgba(255,255,255,.98) ); /* Footer (10% transparency) */ --footer-bg: rgb(255 255 255 / .90); --footer-text: rgba(11, 11, 11, .90); } /* Light theme small tweaks */ html[data-theme="light"] a:hover{ color: var(--accent); } html[data-theme="light"] .btn{ color:#fff; } html[data-theme="light"] .btn-ghost{ background:#fff; border:1px solid var(--line); color: var(--text); } html[data-theme="light"] .btn-ghost:hover, html[data-theme="light"] .btn-ghost:focus-visible{ background: #fff; border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .15); } html[data-theme="light"] .m-link:hover{ background: var(--hover-bg); } html[data-theme="light"] .to-top{ background: var(--accent); border-color: var(--accent); color:#fff; } html[data-theme="light"] .to-top:hover{ background: var(--accent-2); border-color: var(--accent-2); } /* ---------- AUTO THEME (device) ---------- */ @media (prefers-color-scheme: light){ html[data-theme="auto"]{ --page-bg: #ffffff; --text: #0b0b0b; --muted: #555; --line: rgba(0, 0, 0, .12); --shadow: 0 14px 40px rgba(0, 0, 0, .08); --topbar-bg: #ffffff; --header-bg: rgba(255,255,255,.92); --card-bg: #ffffff; --card2-bg: #ffffff; --chip-bg: #ffffff; --hover-bg: rgba(0,0,0,.04); --input-bg: #ffffff; --lead: #2b2b2b; --hero-overlay: linear-gradient( to bottom, rgba(255,255,255,.96), rgba(255,255,255,.18), rgba(255,255,255,.98) ); /* Footer (10% transparency) */ --footer-bg: rgb(255 255 255 / .90); --footer-text: rgba(11, 11, 11, .90); } html[data-theme="auto"] a:hover{ color: var(--accent); } html[data-theme="auto"] .btn-ghost{ background:#fff; border:1px solid var(--line); color: var(--text); } html[data-theme="auto"] .btn-ghost:hover, html[data-theme="auto"] .btn-ghost:focus-visible{ background:#fff; border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .15); } html[data-theme="auto"] .to-top{ background: var(--accent); border-color: var(--accent); color:#fff; } html[data-theme="auto"] .to-top:hover{ background: var(--accent-2); border-color: var(--accent-2); } }