/* ============================================================ THREDLY — warm-charcoal dark theme Applied when . The neutral palette and status colours are plain custom-property overrides (the apps don't set these inline, so a higher-specificity selector wins). The accent "soft" tints are handled inline by theme-init.js. A handful of components use --ink as a *background* (editor chrome, toasts, code blocks); those are pinned to a fixed dark surface here so they don't invert into light-on-light. ============================================================ */ html[data-theme="dark"] { color-scheme: dark; /* headings / primary ink → near-white warm */ --ink: #f3eef3; /* --ink-2 stays dark: it is only ever used as a dark surface */ --ink-2: #2a2530; --text: #e7e0ea; --muted: #a59eaa; --faint: #948d9c; --paper: #221d28; /* cards, sidebar, top bar, inputs */ --surface: #161318; /* body */ --surface-2: #2b2532; /* hover / inset */ --pill: #2b2532; --border: #332c3a; --border-2: #403848; /* status (badges) */ --sage-bg: #1f2a1c; --sage-text: #a7c39b; --amber-bg: #2e2613; --amber-text:#dab978; --error-bg: #321b1b; --error-text:#e0a4a0; --error:#c97b76; /* deeper shadows so elevation still reads on a dark body */ --shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35); --shadow-md: 0 4px 14px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4); --shadow-lg: 0 18px 48px rgba(0,0,0,.62); --hero-glow: rgba(150,124,160,.4); } /* translucent top bar background (hardcoded light value in base CSS) */ html[data-theme="dark"] .topbar { background: rgba(22,19,24,.86); } html[data-theme="dark"] .ed-top { background: rgba(22,19,24,.86); } /* active nav link — warm thread-orange tint + light warm text so it reads clearly on the dark sidebar and matches the brand accent */ html[data-theme="dark"] .nav a.on, html[data-theme="dark"] .ed-nav a.on { background: rgba(212,96,26,.18); color: #ffd6b8; } html[data-theme="dark"] .nav a.on .count, html[data-theme="dark"] .ed-nav a.on .count { background: #3a3144; color: #ffd6b8; } /* hardcoded #fff fills in hover states */ html[data-theme="dark"] .newcard:hover .nplus, html[data-theme="dark"] .ci-newtile:hover .nt-ic { background: var(--surface-2); } /* components that use var(--ink) as a dark BACKGROUND */ html[data-theme="dark"] .pv-bar, html[data-theme="dark"] .pv-coursebar, html[data-theme="dark"] .blk-head, html[data-theme="dark"] .embed-code, html[data-theme="dark"] .off-chip.current, html[data-theme="dark"] .cw-subtabs, html[data-theme="dark"] .bl-toast, html[data-theme="dark"] .mb-toast, html[data-theme="dark"] .wm-toast { background: #2a2530; } html[data-theme="dark"] .ed-tabs .btn-embed { background: #2a2530; border-color: #2a2530; } html[data-theme="dark"] .ed-tabs .btn-embed:hover, html[data-theme="dark"] .ed-tabs .btn-embed.open { background: #352e3d; } /* scrollbars (hardcoded light greys in each page's base style) */ html[data-theme="dark"] *::-webkit-scrollbar-thumb { background: #3b3442; border: 3px solid transparent; background-clip: content-box; } html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: #4a4252; background-clip: content-box; } /* theme toggle: lift the active pill so it reads on the dark track */ html[data-theme="dark"] .theme-seg button.on, html[data-theme="dark"] .ed-top .theme-seg button.on { background: #3a3344; color: #e4d3ec; }