/* Dark mode — activated via [data-theme="dark"] on . Use :root[data-theme="dark"] (pseudo-class + attribute = 0,2,0) so the var overrides beat each page's inline `:root { ... }` block (0,1,0) that loads after this stylesheet. */ :root[data-theme="dark"] { --cream: #15130f; --card: #1f1c16; --gold: #d4b574; --gold-soft: #4a3f2a; --ink: #ece4d0; --ink-soft: #a89878; color-scheme: dark; } [data-theme="dark"] body { background: radial-gradient(circle at 20% 0%, #1d1a13 0%, transparent 40%), radial-gradient(circle at 80% 100%, #221d14 0%, transparent 40%), var(--cream); } [data-theme="dark"] .card { box-shadow: 0 1px 0 var(--gold-soft) inset, 0 30px 60px -20px rgba(0, 0, 0, 0.55), 0 10px 20px -10px rgba(0, 0, 0, 0.45); } [data-theme="dark"] .toc, [data-theme="dark"] .page-nav { background: rgba(31, 28, 22, 0.95); } [data-theme="dark"] .liturgy-strip { background: linear-gradient(to right, rgba(212, 181, 116, 0.08), transparent 70%); } [data-theme="dark"] .to-top a:hover, [data-theme="dark"] .to-top a:focus { background: rgba(212, 181, 116, 0.10); } /* Rosary */ [data-theme="dark"] .set-tab[aria-selected="true"] { color: var(--cream); } [data-theme="dark"] .mystery-btn { background: var(--card); } [data-theme="dark"] .mystery-btn[aria-selected="true"] { background: rgba(212, 181, 116, 0.10); } [data-theme="dark"] .bead-row { background: rgba(212, 181, 116, 0.06); } [data-theme="dark"] .bead { background: var(--card); } [data-theme="dark"] .bead-large { background: var(--card); } /* Chaplet */ [data-theme="dark"] .decade-row { background: rgba(176, 48, 48, 0.12); } [data-theme="dark"] .decade-bead { background: var(--card); } /* Mass */ [data-theme="dark"] .note { background: rgba(212, 181, 116, 0.08); } /* Feasts */ [data-theme="dark"] .readings { background: rgba(212, 181, 116, 0.05); } [data-theme="dark"] .cycle { color: var(--cream); } /* Theme toggle button — anchored inside .card (which is position: relative). */ .theme-toggle { position: absolute; top: 1rem; right: 1rem; z-index: 20; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--gold-soft); background: transparent; color: var(--gold); font-size: 1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.15s, border-color 0.15s, background 0.15s, color 0.15s; font-family: inherit; padding: 0; } .theme-toggle:hover { border-color: var(--gold); background: rgba(201, 169, 97, 0.08); transform: scale(1.05); } .theme-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } [data-theme="dark"] .theme-toggle:hover { background: rgba(212, 181, 116, 0.10); } @media (max-width: 540px) { .theme-toggle { top: 0.6rem; right: 0.6rem; width: 1.9rem; height: 1.9rem; font-size: 0.9rem; } } @media print { .theme-toggle { display: none !important; } }