/* ===== DARK MODE ===== */ /* Auto-detects system preference. Manual toggle via [data-theme="dark"] on . */ /* Brand: pink #F22490 → #FF4DA6, purple #4A2666 → #8B5FBF, yellow stays */ :root { --dm-bg: #1a1a2e; --dm-surface: #2d2040; --dm-text: #F0EDF3; --dm-text-secondary: #B8A8C8; --dm-border: rgba(255,255,255,0.08); --dm-pink: #FF4DA6; --dm-purple: #8B5FBF; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } :root:not([data-theme="light"]) body { background: var(--dm-bg); color: var(--dm-text); } :root:not([data-theme="light"]) .section { background: var(--dm-bg); } :root:not([data-theme="light"]) .section:nth-child(even) { background: var(--dm-surface); } :root:not([data-theme="light"]) .container { color: var(--dm-text); } /* Cards and surfaces */ :root:not([data-theme="light"]) .pack-card, :root:not([data-theme="light"]) .specs-table, :root:not([data-theme="light"]) details, :root:not([data-theme="light"]) .size-card, :root:not([data-theme="light"]) .furn-row { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* Text colors */ :root:not([data-theme="light"]) h1, :root:not([data-theme="light"]) h2, :root:not([data-theme="light"]) h3, :root:not([data-theme="light"]) h4, :root:not([data-theme="light"]) strong { color: var(--dm-text) !important; } :root:not([data-theme="light"]) p, :root:not([data-theme="light"]) li, :root:not([data-theme="light"]) td, :root:not([data-theme="light"]) label, :root:not([data-theme="light"]) summary { color: var(--dm-text-secondary) !important; } /* Links */ :root:not([data-theme="light"]) a[style*="color:#F22490"], :root:not([data-theme="light"]) a[style*="color: #F22490"] { color: var(--dm-pink) !important; } /* Inputs */ :root:not([data-theme="light"]) input, :root:not([data-theme="light"]) select, :root:not([data-theme="light"]) textarea { background: rgba(255,255,255,0.06) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* Footer */ :root:not([data-theme="light"]) footer { background: #0a0a14 !important; } /* Images — slight dim to reduce eye strain */ :root:not([data-theme="light"]) img { filter: brightness(0.9); } :root:not([data-theme="light"]) img:hover { filter: brightness(1); } /* Tables */ :root:not([data-theme="light"]) table { background: var(--dm-surface) !important; } :root:not([data-theme="light"]) tr { border-color: var(--dm-border) !important; } } /* Manual dark mode via data attribute */ [data-theme="dark"] body { background: var(--dm-bg); color: var(--dm-text); } [data-theme="dark"] .section { background: var(--dm-bg); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: var(--dm-text) !important; } [data-theme="dark"] p, [data-theme="dark"] li, [data-theme="dark"] td { color: var(--dm-text-secondary) !important; } [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: rgba(255,255,255,0.06) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; }