/* ═══════════════════════════════════════════════ Dark theme token overrides. Applied when is set. Set by JS/theme.js + preferences.html toggle. ═══════════════════════════════════════════════ */ html[data-theme="dark"] { /* ── Warm, neutral dark — no purple cast. The palette is a darkened mirror of the paper/ink light theme: instead of cream→ink, we go ink→warm-cream. Hues stay in the orange/brown family so the salmon accent (--accent-2) still reads as the same colour and doodles tint nicely. */ /* Background gradient — very dark warm-brown */ --bg-1: #1a1612; --bg-2: #181410; --bg-3: #1d1814; --bg-4: #1a1612; /* ── Glass surfaces ── Hue locked to a clear warm-brown so the user never perceives a blue/purple cast. RGB channels: R > G > B. */ --surface-nav: rgba(22, 17, 13, 0.92); --surface-card: #2a221c; --surface-sidebar: rgba(28, 22, 16, 0.88); --surface-widget: rgba(28, 22, 16, 0.85); --surface-menu: rgba(20, 15, 10, 0.97); --surface-modal: rgba(20, 15, 10, 0.97); --surface-input: #241d17; --surface-footer: rgba(15, 12, 9, 0.75); /* ── Borders ── */ --border-glass: rgba(255, 240, 220, 0.08); --border-nav: rgba(255, 240, 220, 0.06); --border-subtle: #2e2820; --border-divider: rgba(255, 240, 220, 0.07); --border-footer: rgba(255, 240, 220, 0.10); /* ── Text ── warm cream tones, no purple cast */ --text-light: #6b5d52; --text-mid: #a89a8a; --text-mid-light: #a89a8a; --text-dark: #d4c5b3; --charcoal: #f0e4cf; /* ── Accent ── warm tan/copper instead of violet */ --accent: #d6a273; --accent-warm: #d6a273; /* ── Semantic ── */ --color-danger: #e05555; --color-rose: #d48898; --color-success: #4ade80; /* ── Misc ── */ --pil-active: #2e2820; /* ── Ink palette inversion ── Many pages (about, docs/*, edit-profile, login/register, etc.) style text with --ink / --ink-soft / --ink-mid / --ink-light, which were tuned for dark text on cream paper. In dark mode we remap them to warm-cream tones so that text is actually readable instead of dark-on-dark. */ --ink: #f0e4cf; /* primary headings */ --ink-soft: #d4c5b3; /* body emphasis */ --ink-mid: #b8a89a; /* body text */ --ink-light: #7a6c5e; /* eyebrows, hints, captions */ /* ── Paper palette inversion ── Some surfaces use --paper / --paper-soft directly. Map to the same warm-dark surfaces so they don't paint cream on top of the dark background. */ --paper: #1a1612; --paper-soft: #221d18; --paper-2: #1d1814; --paper-3: #221d18; /* ── Lines / dividers ── */ --line: rgba(255, 240, 220, 0.10); --line-soft: rgba(255, 240, 220, 0.06); /* ── Coming-soon page tokens ── */ --cs-eyebrow: #d6a273; --cs-title: #f0e4cf; --cs-lead: #a89a8a; --cs-card-bg: rgba(255, 240, 220, 0.04); --cs-card-title: #f0e4cf; --cs-card-desc: #7a6c5e; --cs-back-bg: rgba(255, 240, 220, 0.07); --cs-back-color: #f0e4cf; } /* ══════════════════════════════════════════════════════ Specific element overrides (hardcoded values in CSS that don't pick up the :root tokens automatically) ══════════════════════════════════════════════════════ */ html[data-theme="dark"] body { color: var(--text-mid); } /* ───────────────────────────────────── NAVBAR — covers every page's .top-info (page-specific CSS files still have hardcoded rgba(255,255,255) here) ───────────────────────────────────── */ html[data-theme="dark"] .top-info { background: var(--surface-nav) !important; border-top-color: var(--border-nav) !important; border-bottom-color: var(--border-nav) !important; } html[data-theme="dark"] .logo, html[data-theme="dark"] .nav-link, html[data-theme="dark"] .main-menu-trigger { color: var(--charcoal); } html[data-theme="dark"] .nav-link:hover, html[data-theme="dark"] .main-menu-trigger:hover { background: rgba(255, 255, 255, 0.06); } html[data-theme="dark"] .mmenu-item { color: var(--text-mid); } html[data-theme="dark"] .mmenu-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--charcoal); } /* Sign out — reddish so it's visually distinct */ html[data-theme="dark"] .mmenu-item--login { color: #e07070 !important; background: rgba(220, 80, 80, 0.08) !important; } html[data-theme="dark"] .mmenu-item--login:hover { background: rgba(220, 80, 80, 0.16) !important; color: #f08080 !important; } html[data-theme="dark"] .mmenu-divider { background: rgba(255, 255, 255, 0.07); } /* ── Post cards (main feed) ── */ html[data-theme="dark"] .post-card { background: var(--surface-card) !important; border-color: var(--border-glass) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .post-title a { color: var(--text-dark); } html[data-theme="dark"] .post-preview { color: var(--text-mid); } html[data-theme="dark"] .post-actions { border-top-color: var(--border-subtle); } html[data-theme="dark"] .post-menu-down { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); } html[data-theme="dark"] .post-menu-down li button { color: var(--text-dark); } html[data-theme="dark"] .post-menu-down li button:hover { background: rgba(255, 255, 255, 0.06); } /* ── Sidebar ── */ html[data-theme="dark"] .sidebar-item { color: var(--text-dark); } html[data-theme="dark"] .sidebar-item:hover, html[data-theme="dark"] .sidebar-item.active { background: rgba(255, 255, 255, 0.06); color: var(--charcoal); } html[data-theme="dark"] .sidebar-create-post-button { /* Solid warm-dark pill with cream content — matches the light theme's intent (high-contrast solid CTA), no awkward tan+black+white mix. */ background: #2a221c !important; color: var(--charcoal) !important; border: 1px solid var(--border-glass) !important; } html[data-theme="dark"] .sidebar-create-post-button .icon { color: var(--charcoal) !important; } html[data-theme="dark"] .asidebar-divider { background: rgba(255, 255, 255, 0.06); } html[data-theme="dark"] .sidebar-create-post-button:hover { background: var(--accent-2) !important; color: #fff !important; border-color: var(--accent-2) !important; } html[data-theme="dark"] .sidebar-create-post-button:hover .icon { color: #fff !important; } html[data-theme="dark"] .sidebar-more { color: #6b5d52; } html[data-theme="dark"] .sidebar-more:hover { color: #b8a89a; } /* ── Filter icon buttons (sort/filter toggles above feed) ── */ html[data-theme="dark"] .button-icon { background: rgba(30, 27, 44, 0.80) !important; border-color: var(--border-glass) !important; color: var(--text-dark); } html[data-theme="dark"] .button-icon:hover, html[data-theme="dark"] .button-icon.active { background: var(--charcoal) !important; color: #fff; } /* ── Feed title + action stats ── */ html[data-theme="dark"] .feed-title { color: var(--charcoal); } html[data-theme="dark"] .post-actions-item { color: var(--text-mid); } html[data-theme="dark"] .post-actions-item:hover { background: rgba(255, 255, 255, 0.05) !important; color: var(--text-dark); } html[data-theme="dark"] .action-stat { color: var(--text-mid); } /* ── Sidebar topic count badges ── */ html[data-theme="dark"] .topic-count { background: rgba(255, 255, 255, 0.07) !important; color: var(--text-mid) !important; } /* ── Right sidebar stat numbers ── */ html[data-theme="dark"] .stat-value { color: var(--charcoal) !important; } html[data-theme="dark"] .statistic-title { color: var(--text-mid) !important; } html[data-theme="dark"] .statistic-row { border-bottom-color: var(--border-subtle) !important; } /* ── Filters / search ── */ html[data-theme="dark"] .search-input { background: var(--surface-input); border-color: var(--border-subtle); color: var(--text-dark); } html[data-theme="dark"] .search-input::placeholder { color: var(--text-light); } html[data-theme="dark"] .search-clear { background: var(--border-subtle); color: var(--text-mid); } html[data-theme="dark"] .pill { background: var(--surface-input); border-color: var(--border-subtle); color: var(--text-dark); } html[data-theme="dark"] .lang-pill { background: rgba(255, 255, 255, 0.05); border-color: var(--border-subtle); color: var(--text-dark); } html[data-theme="dark"] .filter-select { background: var(--surface-input); border-color: var(--border-subtle); color: var(--text-dark); } /* ── Tags ── */ html[data-theme="dark"] .tag-lang { background: rgba(255, 255, 255, 0.07); color: var(--text-mid); } html[data-theme="dark"] .tag-topic { background: rgba(214, 162, 115, 0.18); color: var(--accent); } /* ── Modal ── */ html[data-theme="dark"] .del-modal { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); } html[data-theme="dark"] .del-title { color: var(--charcoal); } html[data-theme="dark"] .del-desc { color: var(--text-mid); } html[data-theme="dark"] .del-btn--cancel { background: rgba(255, 255, 255, 0.08); color: var(--text-dark); } html[data-theme="dark"] .del-btn--cancel:hover { background: rgba(255, 255, 255, 0.13); } /* ── Spinner ── */ html[data-theme="dark"] .spinner { border-color: var(--border-subtle); border-top-color: var(--accent); } /* ── Toast ── */ html[data-theme="dark"] .toast { background: #2d2a42; color: #ede9f8; } /* ── Footer ── */ html[data-theme="dark"] .footer_logo p, html[data-theme="dark"] .footer_links h3 { color: var(--charcoal); } html[data-theme="dark"] .footer_links a { color: var(--text-mid); } html[data-theme="dark"] .footer_links a:hover { color: var(--charcoal); } html[data-theme="dark"] .footer_footer, html[data-theme="dark"] .footer_social a { color: var(--text-light); } html[data-theme="dark"] .footer_footer { border-top-color: var(--border-divider); } html[data-theme="dark"] .footer { background: var(--surface-footer) !important; border-top-color: var(--border-footer) !important; } html[data-theme="dark"] .footer_subtitle { color: var(--text-light); } /* ── Button (floating create post) ── */ html[data-theme="dark"] .button_create_post_button, html[data-theme="dark"] .create-post { background: var(--accent); } /* ── Widget ── */ /* ══════════════════════════════════════════════════════ Right-sidebar widgets — the inline