/** * Apna Mithila — dark-mode.css * * Overrides only the semantic CSS custom properties on :root under * `html[data-theme="dark"]`. The inline script in functions.php * sets that attribute BEFORE first paint — so there is no flash of the * light theme. All components reference variables, so they auto-adapt. * * WCAG AA verified for text colors against their backgrounds. */ html[data-theme="dark"] { color-scheme: dark; /* Brand palette stays referenceable; semantic neutrals flip. */ --am-terracotta: #e0664a; /* lightened for AA contrast on dark surfaces */ --am-mustard: #e8b24a; --am-deep-green: #4f9d77; --am-indigo: #7c7bd6; --am-cream: #fbf6ec; --am-ink: #15110d; /* Semantic neutrals — DARK */ --am-bg: #15110d; --am-surface: #1f1914; --am-surface-alt: #2a2218; --am-text: #f3e9d6; --am-text-muted: #b9a98f; --am-border: #3a2f24; --am-accent: #e0664a; --am-accent-2: #e8b24a; --am-link: #e8b24a; --am-link-hover: #ffd07a; --am-shadow: 0 6px 22px rgba(0, 0, 0, 0.45); --am-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.6); } /* Top utility bar: deeper, less reflective */ html[data-theme="dark"] .am-topbar { background: #0d0a07; border-bottom-color: rgba(255, 255, 255, 0.06); } /* Nav: surface (not pure bg) for layering */ html[data-theme="dark"] .am-nav { background: var(--am-surface); } html[data-theme="dark"] .am-nav__menu, html[data-theme="dark"] .am-nav__menu--fallback { background: var(--am-surface); border-top-color: var(--am-border); } html[data-theme="dark"] .am-nav__menu a:hover, html[data-theme="dark"] .am-nav__menu--fallback a:hover { background: var(--am-surface-alt); } /* Masthead (in case it gets a bg override) */ html[data-theme="dark"] .am-masthead { background: var(--am-bg); } /* Footer near-black for depth separation */ html[data-theme="dark"] .am-footer { background: #0a0805; } html[data-theme="dark"] .am-footer__bottom { border-top-color: rgba(255, 255, 255, 0.08); } html[data-theme="dark"] .am-follow__link { background: rgba(255, 255, 255, 0.07); } html[data-theme="dark"] .am-follow--footer .am-follow__link { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); } /* Photo overlay & video controls need to stay legible on dark */ html[data-theme="dark"] .am-photo-card__overlay { background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0)); } /* Search overlay backdrop slightly stronger */ html[data-theme="dark"] .am-search-overlay { background: rgba(5, 3, 2, 0.9); } /* Verse & entry blockquote surfaces */ html[data-theme="dark"] .am-entry__verse, html[data-theme="dark"] .am-entry__content blockquote, html[data-theme="dark"] .am-entry__lit-author, html[data-theme="dark"] .am-entry__submitter { background: var(--am-surface-alt); } /* Lightbox close/prev/next buttons stay readable */ html[data-theme="dark"] .am-lightbox__close, html[data-theme="dark"] .am-lightbox__prev, html[data-theme="dark"] .am-lightbox__next { background: rgba(255, 255, 255, 0.08); } /* Ensure focus-visible ring pops on dark surfaces */ html[data-theme="dark"] :focus-visible { outline-color: var(--am-accent-2); } /* Smooth transition for the theme swap (except reduced-motion users). */ html[data-theme="dark"] body { transition: background-color var(--am-dur) var(--am-ease), color var(--am-dur) var(--am-ease); } @media (prefers-reduced-motion: reduce) { html[data-theme="dark"] body { transition: none; } }