:root { --frog-green: #2d6a4f; --frog-light: #95d5b2; --frog-bg: #f0f7f4; --frog-accent: #1b4332; --frog-warm: #d8f3dc; --text-dark: #1a1a2e; /* Dark mode overrides (set by .dark class on ) */ --dm-bg: #0f1a15; --dm-text: #c8d6d0; --dm-card: #16231e; --dm-card-border: #2a3d35; --dm-accent: #52b788; --dm-warm: #1a2e25; --dm-green: #52b788; --dm-light: #2d6a4f; } /* ── Dark theme ──────────────────────────────────────── */ html.dark { --frog-bg: var(--dm-bg) !important; --frog-light: var(--dm-light) !important; --frog-accent: var(--dm-accent) !important; --frog-warm: var(--dm-warm) !important; --text-dark: var(--dm-text) !important; --frog-green: var(--dm-green) !important; } html.dark body { background-image: radial-gradient(circle at 10% 90%, rgba(82, 183, 136, 0.04) 0%, transparent 50%), radial-gradient(circle at 90% 10%, rgba(45, 106, 79, 0.06) 0%, transparent 50%); background: var(--dm-bg) !important; color: var(--dm-text) !important; } /* Improve dark mode readability for links and headings */ html.dark a { color: var(--dm-accent) !important; } html.dark a:hover { color: #6fcf97 !important; } html.dark header { background: var(--dm-card) !important; border-color: var(--dm-card-border) !important; } html.dark .entry-content { background: var(--dm-card) !important; border-color: var(--dm-card-border) !important; } /* Dark mode for blog.css elements (imported via @import) */ html.dark .blog-header { background: var(--dm-card) !important; } html.dark .post-card { background: var(--dm-card) !important; border-color: var(--dm-card-border) !important; } html.dark .post-card:hover { border-color: var(--dm-accent) !important; } html.dark .post-meta { color: #7a8a82 !important; } html.dark .post-excerpt { color: #8a9a92 !important; } html.dark article { background: var(--dm-card) !important; } html.dark .article-body { color: var(--dm-text) !important; } html.dark .article-body code { background: #1a2e25 !important; } html.dark .article-body td { border-color: var(--dm-card-border) !important; } html.dark .article-body tr:nth-child(even) td { background: rgba(82, 183, 136, 0.04) !important; } html.dark .article-body td:first-child { color: var(--dm-accent) !important; } html.dark .article-body blockquote { background: #141f1a !important; color: #9aaba3 !important; } html.dark .article-body .notebook-note { background: #1e2516 !important; border-color: #8a7a2a !important; color: #b8a84a !important; } html.dark .article-body .notebook-note strong { color: #d4c45e !important; } html.dark .article-body .froggy-rule { background: #1e2516 !important; border-color: #8a7a2a !important; color: #b8a84a !important; } html.dark .article-body .froggy-rule strong { color: #d4c45e !important; } html.dark .article-body .frog-diagram svg { background: #141f1a !important; } html.dark .coming-soon { background: var(--dm-card) !important; border-color: var(--dm-card-border) !important; color: #7a8a82 !important; } html.dark footer { color: #6a7a72 !important; } html.dark .blog-desc { color: #8a9a92 !important; } html.dark .search-input { background: var(--dm-card) !important; border-color: var(--dm-card-border) !important; color: var(--dm-text) !important; } /* Force dark on common inline-styled containers */ html.dark [style*="color:#"] { color: var(--dm-text) !important; } html.dark [style*="color: #"] { color: var(--dm-text) !important; } html.dark [style*="color:var"] { color: var(--dm-text) !important; } html.dark [style*="color: var"] { color: var(--dm-text) !important; } html.dark [style*="background:#"] { background: var(--dm-card) !important; } html.dark [style*="background: #"] { background: var(--dm-card) !important; } html.dark div[class*="card"] { background: var(--dm-card) !important; border-color: var(--dm-card-border) !important; } html.dark .card { background: var(--dm-card) !important; border-color: var(--dm-card-border) !important; color: var(--dm-text) !important; } html.dark .card p { color: var(--dm-text) !important; } html.dark .card li { color: var(--dm-text) !important; } /* Smooth transition for theme change */ html, body, header, a, .entry-content, footer { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } html { scroll-behavior: smooth; } img { max-width: 100%; height: auto; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Restore sensible defaults after universal reset */ h1, h2, h3, h4 { margin: 0 0 0.5rem 0; line-height: 1.3; } p { margin: 0 0 1rem 0; line-height: 1.6; } ul, ol { margin: 0.5rem 0 1rem 1.5rem; padding-left: 0.5rem; } li { margin-bottom: 0.3rem; } body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--frog-bg); color: var(--text-dark); min-height: 100vh; display: flex; flex-direction: column; align-items: center; background-image: radial-gradient(circle at 10% 90%, rgba(45, 106, 79, 0.06) 0%, transparent 50%), radial-gradient(circle at 90% 10%, rgba(149, 213, 178, 0.08) 0%, transparent 50%); } .container { max-width: 800px; width: 100%; padding: 2rem 1.5rem; } /* ── Footer ──────────────────────────────────────── */ footer { margin-top: 2.5rem; padding: 1.5rem 0 0.5rem; border-top: 1px solid rgba(149, 213, 178, 0.3); text-align: center; color: #6b7280; font-size: 0.85rem; line-height: 1.8; } footer .footer-tagline { font-size: 0.95rem; color: var(--frog-accent); margin-bottom: 0.75rem; } footer .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 0.6rem; margin-bottom: 0.75rem; } footer .footer-nav a { color: var(--frog-green); text-decoration: none; padding: 0.2rem 0.5rem; border-radius: 6px; font-size: 0.8rem; font-weight: 500; transition: background 0.15s; } footer .footer-nav a:hover { background: rgba(45, 106, 79, 0.08); } footer .footer-colophon { font-size: 0.75rem; color: #9ca3af; } footer .footer-colophon a { color: #9ca3af; text-decoration: underline; text-decoration-color: rgba(149, 213, 178, 0.4); text-underline-offset: 2px; } /* Dark mode lanyard */ html.dark .lanyard { background: rgba(82, 183, 136, 0.12) !important; border-color: rgba(82, 183, 136, 0.3) !important; color: var(--dm-accent) !important; } /* Dark mode footer overrides */ html.dark footer { border-top-color: rgba(82, 183, 136, 0.15); color: #7a8a82; } html.dark footer .footer-tagline { color: var(--dm-accent); } html.dark footer .footer-nav a { color: var(--dm-accent); } html.dark footer .footer-nav a:hover { background: rgba(82, 183, 136, 0.1); } html.dark footer .footer-colophon { color: #6a7a72; } html.dark footer .footer-colophon a { color: #6a7a72; } /* Dark mode for blog post components */ html.dark .article-subtitle { color: #8a9a92 !important; } html.dark .wisdom-quote { background: #141f1a !important; color: #9aaba3 !important; border-color: var(--dm-accent) !important; } html.dark .quote-attribution { color: var(--dm-accent) !important; } html.dark .reaction-moment { background: var(--dm-warm) !important; } html.dark .reaction-content strong { color: var(--dm-accent) !important; } html.dark .reaction-content p { color: var(--dm-text) !important; } html.dark .stat-card { background: var(--dm-card) !important; border-color: var(--dm-card-border) !important; } html.dark .stat-number { color: var(--dm-accent) !important; } html.dark .stat-label { color: #7a8a82 !important; }