/* OWN Charts — Appearance overrides driven by appearance.js (data-* on ). Dark theme remaps the surface/ink tokens AND the hard-coded #fff card surfaces across the dashboard shell + settings. Compact tightens spacing. Reduced motion neutralizes animations & transitions. */ /* ============================================================ DARK Foundation: remap the WHOLE token set so every token-built surface, ink level, hairline, semantic colour and accent flips automatically. appearance.js normalizes any stray hard-coded light surface on top. */ :root[data-theme="dark"] { --ivory:#0C0D10; --bg:#0C0D10; --bone:#131519; --paper:#171A1F; --paper-warm:#181C22; --ink:#ECECEA; --obsidian:#0C0D10; --ink-2:#FFFFFF; --ink-soft:rgba(236,236,234,0.72); --ink-mute:rgba(236,236,234,0.54); --ink-faint:rgba(236,236,234,0.34); --line:rgba(236,236,234,0.13); --line-strong:rgba(236,236,234,0.24); --bg-elevated:#16191F; --bg-warm:#131519; --bg-inverse:#1C2027; --fg:#ECECEA; --fg-muted:rgba(236,236,234,0.72); --fg-subtle:rgba(236,236,234,0.54); --fg-inverse:#0C0D10; /* On-dark text tokens (already light) */ --paper-light:rgba(236,236,234,0.92); --paper-soft:rgba(236,236,234,0.66); --paper-mute:rgba(236,236,234,0.50); --paper-faint:rgba(236,236,234,0.32); /* Accent — mid teal: reads as eyebrow/kicker text on the dark field AND still carries light text when used as a button / badge fill. */ --ocean:#2F8A80; --sea:#86C7C0; --ocean-mute:rgba(134,199,192,0.14); --ocean-faint:rgba(134,199,192,0.22); --sea-soft:rgba(134,199,192,0.18); --focus:#4FB0A4; /* Semantic — lifted for legibility on dark; soft fills re-tinted */ --gain:#5FB58C; --gain-soft:rgba(95,181,140,0.18); --loss:#E08C8C; --loss-soft:rgba(224,140,140,0.18); --alert:#C9A86B; --alert-soft:rgba(201,168,107,0.18); --info:#6FB7AE; --info-soft:rgba(111,183,174,0.16); /* Shadows — deeper on dark */ --shadow-card:0 14px 38px rgba(0,0,0,0.42); --shadow-card-lg:0 16px 40px rgba(0,0,0,0.46); --shadow-hero:0 26px 64px rgba(0,0,0,0.55); --shadow-float:0 30px 66px rgba(0,0,0,0.55); /* ── Chart palette (mirrors window.C) — lifted for legibility on dark. Ink/grid go light; categorical "territory" series brighten to pastels so data stays readable against the #0C0D10 field. ─────────────── */ --ck-ink: #ECECEA; --ck-ink2: #E4E4E2; --ck-ink-soft: rgba(236,236,234,0.74); --ck-ink-mute: rgba(236,236,234,0.56); --ck-ink-faint: rgba(236,236,234,0.40); --ck-ink-very: rgba(236,236,234,0.22); --ck-grid: rgba(236,236,234,0.10); --ck-line: rgba(236,236,234,0.14); --ck-line-strong:rgba(236,236,234,0.24); --ck-paper: #16191F; --ck-ivory: #ECECEA; --ck-bone: #C9CCCF; --ck-ocean: #3FA99C; --ck-sea: #9FD8D1; --ck-obsidian: #ECECEA; --ck-midnight: #7E97D6; --ck-burgundy: #E59A9A; --ck-espresso: #C9A98C; --ck-slate: #A6B6C8; --ck-forest: #6FBF98; --ck-oxblood: #E59A9A; --ck-clay: #D89A78; --ck-brass: #C9A86B; --ck-olive: #B3C088; --ck-gain: #6FBF98; --ck-gain-soft: rgba(95,181,140,0.20); --ck-loss: #E59A9A; --ck-loss-soft: rgba(224,140,140,0.20); --ck-alert: #C9A86B; --ck-alert-soft: rgba(201,168,107,0.20); } :root[data-theme="dark"] body { background:#0C0D10; color:#ECECEA; } :root[data-theme="dark"] .dash { background:#0C0D10; } /* hard-coded #fff surfaces across the shell + settings → elevated dark */ :root[data-theme="dark"] .hd, :root[data-theme="dark"] .kpi-c, :root[data-theme="dark"] .banner, :root[data-theme="dark"] .story, :root[data-theme="dark"] .cc, :root[data-theme="dark"] .set-card, :root[data-theme="dark"] .hv-acct, :root[data-theme="dark"] .hv-traj, :root[data-theme="dark"] .da-dom, :root[data-theme="dark"] .da-card { background:#16191F !important; border-color:rgba(236,236,234,0.12) !important; } :root[data-theme="dark"] .set-rail-i.on { background:#16191F; box-shadow:0 1px 0 rgba(0,0,0,0.2), inset 0 0 0 1px rgba(236,236,234,0.14); } :root[data-theme="dark"] .set-rail-i:hover { background:rgba(236,236,234,0.05); } :root[data-theme="dark"] .set-input, :root[data-theme="dark"] .set-select, :root[data-theme="dark"] .set-textarea { background:#0C0D10; color:#ECECEA; border-color:rgba(236,236,234,0.2); } :root[data-theme="dark"] .set-select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ECECEA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } :root[data-theme="dark"] .set-seg { background:rgba(236,236,234,0.08); } :root[data-theme="dark"] .set-seg button.on { background:#22262D; color:#fff; } :root[data-theme="dark"] .set-sw { background:rgba(236,236,234,0.24); } :root[data-theme="dark"] .set-li-ic, :root[data-theme="dark"] .set-check { background:rgba(236,236,234,0.06); } :root[data-theme="dark"] .set-plan { background:linear-gradient(180deg,#181C22,#12151A); border-color:rgba(14,58,62,0.34); } :root[data-theme="dark"] .set-btn.ghost { color:#ECECEA; } :root[data-theme="dark"] .set-savebar { background:rgba(12,13,16,0.86); border-color:rgba(236,236,234,0.14); } :root[data-theme="dark"] .hd-cog, :root[data-theme="dark"] .sb-moon { background:transparent; } /* the sidebar is dark in BOTH themes — keep it dark, and scope the "light" surface tokens back to light inside it (the global dark remap flips --ivory / --ink to near-black, which would hide the active item + brand wordmark). */ :root[data-theme="dark"] .sb { background:#0C0D10; --ivory:#ECECEA; --ink:#ECECEA; --paper-light:rgba(236,236,234,0.92); --paper-soft:rgba(236,236,234,0.70); --paper-mute:rgba(236,236,234,0.52); --paper-faint:rgba(236,236,234,0.34); } :root[data-theme="dark"] .sb-item.on { background:rgba(236,236,234,0.12); } /* ── Atlas rail — hand-themed dark (excluded from the runtime normalizer in appearance.js). It ships as a WHITE card with warm-dark ink; here we flip the whole interior to a dark glass with light ink so it feels identical to the light version, just inverted. Mirrors the literal colours in category.css's .ar-* block. ─────────────────────────────────────────── */ :root[data-theme="dark"] .ar { background:#111317 !important; color:rgba(236,236,234,0.92) !important; border-color:rgba(236,236,234,0.10) !important; box-shadow:0 30px 70px rgba(0,0,0,0.55), 0 6px 18px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(236,236,234,0.04) !important; } :root[data-theme="dark"] .ar-bar { border-bottom-color:rgba(236,236,234,0.10); } :root[data-theme="dark"] .ar-bar-eye { color:rgba(236,236,234,0.82); } :root[data-theme="dark"] .ar-hero { border-bottom-color:rgba(236,236,234,0.10); } :root[data-theme="dark"] .ar-hero h2 { color:#F2F2F0; } :root[data-theme="dark"] .ar-noticed { color:rgba(236,236,234,0.50); } :root[data-theme="dark"] .ar-min { background:rgba(236,236,234,0.06); border-color:rgba(236,236,234,0.16); color:rgba(236,236,234,0.80); } :root[data-theme="dark"] .ar-min:hover { background:rgba(236,236,234,0.12); } :root[data-theme="dark"] .ar-card { background:#191D24; border-color:rgba(236,236,234,0.10); box-shadow:0 1px 4px rgba(0,0,0,0.3); } :root[data-theme="dark"] .ar-card:hover { box-shadow:0 8px 22px rgba(0,0,0,0.4); } :root[data-theme="dark"] .ar-card-num { color:rgba(236,236,234,0.42); } :root[data-theme="dark"] .ar-t { color:#F2F2F0; } :root[data-theme="dark"] .ar-b { color:rgba(236,236,234,0.80); } :root[data-theme="dark"] .ar-card.is-done .ar-t { color:rgba(236,236,234,0.40); } :root[data-theme="dark"] .ar-check { border-color:rgba(236,236,234,0.24); } :root[data-theme="dark"] .ar-snap-b { color:rgba(236,236,234,0.72); } :root[data-theme="dark"] .ar-foot { border-top-color:rgba(236,236,234,0.10); background:#111317; } :root[data-theme="dark"] .ar-composer { background:rgba(236,236,234,0.06); border-color:rgba(236,236,234,0.12); } :root[data-theme="dark"] .ar-input { color:rgba(236,236,234,0.55) !important; } :root[data-theme="dark"] .ar-status { color:rgba(236,236,234,0.52); } /* ---- page-specific surfaces (literal #fff in page/card CSS + inline