/* ────────────────────────────────────────────────────────────── Rideekanda Ecosystem Theme · eco-theme.css Shared light/dark theming for the content pages. The night palette overrides the family CSS variables when . eco-theme.js sets data-theme (Auto by time, or a manual Light/Dark choice) and injects the toggle button. ────────────────────────────────────────────────────────────── */ /* Night palette — same values the home page / dashboard use. Applied whenever the manual or time-based choice resolves to dark. */ :root[data-theme="dark"] { --bg: #1f1a14; --bg-2: #16120d; --card: #2a241c; --ink: #f3ecdb; --ink-soft: #d8ccb4; --ink-dim: #d8ccb4; --muted: #9d8d72; --line: rgba(255, 235, 200, 0.12); --accent: #c79a5c; --accent-soft: #e0b76a; color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* Keep the canvas (safe-area / overscroll) in sync with the theme, beating any page-level prefers-color-scheme rules on /:root. */ :root[data-theme] { background: var(--bg); transition: background .4s ease; } /* Round theme toggle, bottom-right. Cycles Auto → Light → Dark. */ .eco-theme-toggle { position: fixed; right: 18px; bottom: 18px; z-index: 99500; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; padding: 0; background: color-mix(in srgb, var(--card, #fffaf0) 82%, transparent); color: var(--accent, #a3763c); border: 1px solid var(--line, rgba(0,0,0,0.14)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 22px -10px rgba(0,0,0,0.45); transition: transform .2s ease, background .3s ease, color .3s ease, border-color .3s ease; } .eco-theme-toggle:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent, #a3763c) 45%, var(--line, rgba(0,0,0,0.14))); } .eco-theme-toggle svg { width: 20px; height: 20px; display: block; } @media print { .eco-theme-toggle { display: none; } }