/* ============================================================ Dark theme. The inline script sets data-theme="dark" on before first paint, so this never flashes. Most of the UI flips just by redefining the tokens below; the rules after that fix the handful of hardcoded colors. ============================================================ */ :root[data-theme="dark"] { /* Dark twin of the brand palette; mirrors the light :root above. */ /* Surface greys stay cool-neutral on purpose; warm darks read muddy and tire the eyes. */ --shell: #202021; --page: #171718; --rail-top: #262627; --panel: #2c2c2e; --line: #3a3a3d; --line-soft: #2a2a2c; /* On dark the chips/composer edge needs no extra weight; the standard line reads fine. */ --line-strong: var(--line); --avatar-bg: #38383b; --avatar-ink: var(--muted); /* Lifted to ~3:1 on the panel so empty check rings stay visible in the dark. */ --ring: #7b766e; --text: #f2f1ec; --muted: #a3a098; --text-muted-2: var(--muted); /* The primary brand orange stays identical across themes; accent-2 is the lighter dark-mode ink. */ --accent: #d4693e; --accent-2: #ef9569; /* Dark ink keeps filled accent controls accessible on the dark canvas. */ --on-accent: #202021; --grad: var(--accent); --grad-warm: var(--accent); /* Selected/tinted washes: translucent accent over the grey, not baked warm browns. */ --user-bubble: rgba(212, 105, 62, 0.16); --user-text: #f1c3a2; --chip-active: rgba(212, 105, 62, 0.16); --tag-bg: rgba(212, 105, 62, 0.13); --tag-text: #e8a878; --date-bg: rgba(212, 105, 62, 0.16); --date-text: #f0945c; --overdue: #ec6a4f; --danger-wash: rgba(236, 106, 79, 0.18); --warn: #ffb84d; --warn-fill: #e0a23c; /* Brighter priority solids for dark (like the category colors), so rings and flags read. */ --prio-1: #ec6a4f; --prio-2: #e0a23c; --prio-3: #7e9be0; --success: #4ec07e; --success-soft: rgba(78, 192, 126, 0.16); /* Brighter category solids for dark; the soft rgba tints from :root carry over and read fine. */ --cat-health: #4ec07e; --cat-money: #e0a23c; --cat-learn: #7e9be0; --cat-create: #c08fd6; --shadow: 0 14px 34px rgba(0, 0, 0, 0.55); --shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.45); --scrim: rgba(0, 0, 0, 0.6); --switch-off: #49494c; background-color: var(--page); } /* White-overlay hovers blow out on a dark rail; drop to a faint light wash. */ /* Gated to real pointers so the wash never sticks on the mobile bar after a tap. */ @media (hover: hover) and (pointer: fine) and (min-width: 981px) { [data-theme="dark"] .nav-item:hover { background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] #profile:hover { background: rgba(255, 255, 255, 0.06); } } [data-theme="dark"] #profile[aria-expanded="true"] { background: rgba(255, 255, 255, 0.06); } /* Selected desktop tab: --panel is nearly the rail color on dark, so lift it with a tint + white label. */ @media (min-width: 981px) { /* Neutral tint, not an accent fill, so it wants the light text, not the dark --on-accent ink. */ [data-theme="dark"] .nav-item.active { background: #38383b; color: var(--text); box-shadow: none; } } /* Add sheet's active segment: --panel barely lifts off --shell on dark, so use the same neutral tint. */ [data-theme="dark"] .add-seg-btn.active { background: #38383b; box-shadow: none; } /* Same for the Tasks/Notes switch above a list. */ [data-theme="dark"] .tasks-kind-btn.active { background: #38383b; box-shadow: none; } [data-theme="dark"] .goal-type-opt.selected { background: #38383b; box-shadow: none; } /* Selected mobile pill: warm --tag-bg reads muddy on the dark bar, so use a neutral grey lift of it. */ @media (max-width: 980px) { [data-theme="dark"] .nav-item.active .nav-ico-on { background: #38383b; } } /* Composer is pure white on light; on dark, lift it above the panel grey with a visible edge + shadow. */ [data-theme="dark"] #composer { background: #38383b; border-color: #4d4d50; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } [data-theme="dark"] #composer:focus-within { border-color: var(--accent); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.52); } /* The Add sheet lives on --panel, so its embedded composer needs the same lifted dark surface. */ [data-theme="dark"] .add-ask { background: #38383b; border-color: #4d4d50; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } /* Connection banner: warm-amber wash instead of the light card. */ [data-theme="dark"] #banner { background: rgba(245, 165, 36, 0.14); color: #f0c578; border-color: rgba(245, 165, 36, 0.32); } /* Task description: brighter on dark so it reads against the dark card. */ [data-theme="dark"] .task-card .card-sub, [data-theme="dark"] .note-card .card-sub { color: #cabfb0; } /* FAB: black lift. */ [data-theme="dark"] #fab { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); } [data-theme="dark"] #fab:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); } /* The switch knob stays white in both states; the dark --on-accent ink would vanish on the off track. */ [data-theme="dark"] .switch-knob::after { background: #fff; } /* Mobile bottom bar shadow (only when the rail is the floating bottom bar). */ @media (max-width: 980px) { [data-theme="dark"] #rail { box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.5); } } /* ---- Scrollbars: hidden on mobile, thin + auto-hiding on desktop ---- */ /* Mobile: no visible scrollbars (content still scrolls by touch). */ @media (max-width: 980px) { * { scrollbar-width: none; } *::-webkit-scrollbar { width: 0; height: 0; } } /* Desktop: thin bar in a reserved gutter; the thumb stays invisible until you hover the area. */ @media (min-width: 981px) { * { scrollbar-width: thin; scrollbar-color: transparent transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: transparent; border: 3px solid transparent; background-clip: padding-box; border-radius: var(--radius-pill); } /* Fade the thumb in when the cursor is anywhere inside the scrollable area. */ *:hover::-webkit-scrollbar-thumb, *:focus-within::-webkit-scrollbar-thumb { background: var(--muted); } *:hover, *:focus-within { scrollbar-color: var(--muted) transparent; } }