/* ============================================================ THEME — DARK MODE Override token warna dari design-system.css saat punya atribut data-theme="dark". Karena hampir semua CSS di project ini pakai var(--x), override token di sini otomatis nyebar ke sebagian besar komponen tanpa perlu sentuh tiap file. ============================================================ */ html, body { transition: background-color .25s ease, color .25s ease; } [data-theme="dark"] { /* Brand — sedikit dicerahkan biar tetap kontras di atas gelap */ --brand-primary: #2E9C74; --brand-primary-light: #3EB588; --brand-primary-dark: #1F4D3E; --brand-secondary: #E0A63F; --brand-accent: #2E9C74; /* Surface */ --bg-base: #121613; --bg-surface: #191F1B; --bg-elevated: #1F2621; --bg-card: #1F2621; --bg-hover: #283029; --bg-overlay: rgba(0, 0, 0, 0.7); /* Borders */ --border-subtle: rgba(242, 243, 239, 0.08); --border-default: rgba(242, 243, 239, 0.14); --border-strong: rgba(242, 243, 239, 0.22); --border-brand: rgba(46, 156, 116, 0.4); /* Text */ --text-primary: #F2F3EF; --text-secondary: #A9B3AC; --text-tertiary: #75807A; --text-inverse: #1B2420; --text-brand: #4FBF95; /* Status */ --status-new: #E2685A; --status-new-bg: rgba(226, 104, 90, 0.16); --status-process: #E0A63F; --status-process-bg: rgba(224, 166, 63, 0.18); --status-ready: #2E9C74; --status-ready-bg: rgba(46, 156, 116, 0.18); --status-done: #7FBF5D; --status-done-bg: rgba(127, 191, 93, 0.16); /* Semantic */ --success: #7FBF5D; --success-bg: rgba(127, 191, 93, 0.16); --warning: #E0A63F; --warning-bg: rgba(224, 166, 63, 0.18); --danger: #E2685A; --danger-bg: rgba(226, 104, 90, 0.16); --info: #2E9C74; --info-bg: rgba(46, 156, 116, 0.16); color-scheme: dark; } [data-theme="dark"] body { background: var(--bg-base); color: var(--text-primary); } /* Shadow perlu dikurangi opasitasnya di dark mode biar gak keliatan aneh */ [data-theme="dark"] { --shadow-sm: 0 1px 2px rgba(0,0,0,0.35); --shadow-md: 0 4px 12px rgba(0,0,0,0.4); --shadow-lg: 0 10px 30px rgba(0,0,0,0.5); } /* Beberapa elemen sengaja dikecualikan dari dark mode karena isinya foto produk / mockup warna-warni yang gak boleh ikut re-theme */ [data-theme="dark"] .pop-card-img, [data-theme="dark"] .menu-item-row-img, [data-theme="dark"] .modal-item-img, [data-theme="dark"] .showcase-hero-img, [data-theme="dark"] .carousel-slide img, [data-theme="dark"] .blog-card-img { filter: brightness(0.92); }