/* ============================================================ VARIANTS — Dark mode [data-mode="dark"] (or OS preference when no explicit light). Overrides era role tokens + a few component surfaces for dark. Extracted verbatim from the former themes.css dark block. ============================================================ */ /* ============================================================ THEMES — Dark mode + four color palettes ============================================================ Color modes are applied via [data-theme] on . Dark mode is applied via [data-mode="dark"] on . Both can combine: data-theme="ocean" data-mode="dark". ============================================================ */ /* ---------------------------------------------------------- DEFAULT DARK MODE Inverts the base theme when data-mode="dark" is set or when the user's OS prefers dark and no explicit preference has been saved. ---------------------------------------------------------- */ @media (prefers-color-scheme: dark) { html:not([data-mode="light"]) { color-scheme: dark; --color-ink: #ede9e0; --color-paper: #17171a; --color-muted: #9a948a; --color-border: rgba(237, 233, 224, 0.12); --color-surface: #1f1e1b; --color-accent: #ede9e0; --color-accent-contrast: #17171a; --color-accent-soft: rgba(237, 233, 224, 0.1); --shadow-soft: 0 20px 50px rgba(0, 0, 0, 0.3); } } html[data-mode="dark"] { color-scheme: dark; --color-ink: #ede9e0; --color-paper: #17171a; --color-muted: #9a948a; --color-border: rgba(237, 233, 224, 0.12); --color-surface: #1f1e1b; --color-accent: #ede9e0; --color-accent-contrast: #17171a; --color-accent-soft: rgba(237, 233, 224, 0.1); --shadow-soft: 0 20px 50px rgba(0, 0, 0, 0.3); } /* Dark mode overrides for elements with hardcoded light colors */ @media (prefers-color-scheme: dark) { html:not([data-mode="light"]) body { background: radial-gradient(circle at top left, rgba(237, 233, 224, 0.04), transparent 35%), linear-gradient(180deg, #121214 0%, var(--color-paper) 100%); } html:not([data-mode="light"]) .site-header { background: rgba(23, 23, 26, 0.82); border-bottom-color: rgba(237, 233, 224, 0.06); } html:not([data-mode="light"]) .surface-card, html:not([data-mode="light"]) .card { background: rgba(31, 30, 27, 0.85); } html:not([data-mode="light"]) .surface-card-accent { background: linear-gradient(180deg, rgba(237, 233, 224, 0.06), rgba(237, 233, 224, 0.02)); } html:not([data-mode="light"]) .button-secondary, html:not([data-mode="light"]) .topic-pills a { background: rgba(237, 233, 224, 0.06); } html:not([data-mode="light"]) .signup-form input { background: rgba(237, 233, 224, 0.06); } html:not([data-mode="light"]) .site-footer, html:not([data-mode="light"]) .section-footer-tint { background: rgba(23, 23, 26, 0.45); } html:not([data-mode="light"]) .post-card-featured { background: linear-gradient(180deg, rgba(31, 30, 27, 0.92), rgba(31, 30, 27, 0.85)); } html:not([data-mode="light"]) .hero-home::before { background: radial-gradient(circle at top right, rgba(126, 191, 103, 0.08), transparent 30%), radial-gradient(circle at left center, rgba(237, 233, 224, 0.04), transparent 32%); } } html[data-mode="dark"] body { background: radial-gradient(circle at top left, rgba(237, 233, 224, 0.04), transparent 35%), linear-gradient(180deg, #121214 0%, var(--color-paper) 100%); } html[data-mode="dark"] .site-header { background: rgba(23, 23, 26, 0.82); border-bottom-color: rgba(237, 233, 224, 0.06); } html[data-mode="dark"] .surface-card, html[data-mode="dark"] .card { background: rgba(31, 30, 27, 0.85); } html[data-mode="dark"] .surface-card-accent { background: linear-gradient(180deg, rgba(237, 233, 224, 0.06), rgba(237, 233, 224, 0.02)); } html[data-mode="dark"] .button-secondary, html[data-mode="dark"] .topic-pills a { background: rgba(237, 233, 224, 0.06); } html[data-mode="dark"] .signup-form input { background: rgba(237, 233, 224, 0.06); } html[data-mode="dark"] .site-footer, html[data-mode="dark"] .section-footer-tint { background: rgba(23, 23, 26, 0.45); } html[data-mode="dark"] .post-card-featured { background: linear-gradient(180deg, rgba(31, 30, 27, 0.92), rgba(31, 30, 27, 0.85)); } html[data-mode="dark"] .hero-home::before { background: radial-gradient(circle at top right, rgba(126, 191, 103, 0.08), transparent 30%), radial-gradient(circle at left center, rgba(237, 233, 224, 0.04), transparent 32%); }