/* ============================================================ THEME.CSS - Design Tokens & Base (Dual Theme) DARK : Neo Dark Premium (Charcoal Brown + Gold) [existing] LIGHT : Modern Soft Glass SaaS (Pastel + Teal) [baru] Tema dikontrol via . ============================================================ */ :root { /* --- Latar & Permukaan (default: DARK - fallback tanpa JS) --- */ --bg-app: #16130f; --bg-sidebar: #1c1813; --bg-surface: #221d17; --bg-surface-2: #2a241c; --bg-surface-3: #332c22; --bg-input: #1a160f; --bg-hover: #2f281e; /* --- Teks --- */ --text-strong: #fbf6e9; --text-body: #e8e0cc; --text-muted: #a59a82; --text-faint: #756c59; /* --- Border & Garis --- */ --border-color: #3a3127; --border-soft: #2c251c; /* --- Aksen (DARK: Gold — identitas existing) --- */ --gold: #d4af37; --gold-soft: #e6c75a; --gold-dim: #a98c2c; --gold-glow: rgba(212, 175, 55, .25); /* --- Status --- */ --success: #2ecc71; --success-soft: rgba(46, 204, 113, .15); --info: #3b9eff; --info-soft: rgba(59, 158, 255, .15); --warning: #f4b740; --warning-soft: rgba(244, 183, 64, .15); --danger: #e8553e; --danger-soft: rgba(232, 85, 62, .15); /* --- Teks di atas aksen --- */ --on-accent: #1c1813; /* --- Radius & Bayangan --- */ --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 6px 20px rgba(0,0,0,.35); --shadow-gold: 0 4px 18px var(--gold-glow); /* --- Tata Letak --- */ --sidebar-w: 262px; --sidebar-w-c: 78px; --navbar-h: 66px; --transition: .22s cubic-bezier(.4,0,.2,1); /* --- Font --- */ --font-sans: 'Inter','Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif; } /* ============================================================ DARK THEME — Neo Dark Premium (identitas existing, JANGAN diubah) ============================================================ */ [data-theme="dark"] { --bg-app: #16130f; --bg-sidebar: #1c1813; --bg-surface: #221d17; --bg-surface-2: #2a241c; --bg-surface-3: #332c22; --bg-input: #1a160f; --bg-hover: #2f281e; --text-strong: #fbf6e9; --text-body: #e8e0cc; --text-muted: #a59a82; --text-faint: #756c59; --border-color: #3a3127; --border-soft: #2c251c; --gold: #d4af37; --gold-soft: #e6c75a; --gold-dim: #a98c2c; --gold-glow: rgba(212, 175, 55, .25); --success: #2ecc71; --success-soft: rgba(46, 204, 113, .15); --info: #3b9eff; --info-soft: rgba(59, 158, 255, .15); --warning: #f4b740; --warning-soft: rgba(244, 183, 64, .15); --danger: #e8553e; --danger-soft: rgba(232, 85, 62, .15); --on-accent: #1c1813; --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 6px 20px rgba(0,0,0,.35); --shadow-gold: 0 4px 18px var(--gold-glow); /* Aliasing token semantik (Design System baru) */ --primary: var(--gold); --primary-soft: var(--gold-soft); --primary-dim: var(--gold-dim); --primary-glow: var(--gold-glow); --background: var(--bg-app); --surface: var(--bg-surface); --surface-light: var(--bg-surface-2); --surface-hover: var(--bg-hover); --text-primary: var(--text-strong); --text-secondary: var(--text-muted); --border: var(--border-color); } /* ============================================================ LIGHT THEME — Modern Soft Glass SaaS (Pastel Cyan/Mint/Lavender + Teal) Token lama (--gold, --bg-surface, dst) dipetakan ke palet terang agar seluruh komponen existing otomatis mengikuti tema. ============================================================ */ [data-theme="light"] { /* --- Latar & Permukaan (pastel) --- */ --bg-app: #DCE9EA; --bg-sidebar: #EAF4F3; --bg-surface: #EAF4F3; --bg-surface-2: #E1EFED; --bg-surface-3: #D7E8E6; --bg-input: rgba(255,255,255,.65); --bg-hover: rgba(255,255,255,.75); /* --- Teks --- */ --text-strong: #263536; --text-body: #3D5254; --text-muted: #6F8587; --text-faint: #91A5A6; /* --- Border (frosted glass) --- */ --border-color: rgba(255,255,255,.75); --border-soft: rgba(18,130,143,.10); /* --- Aksen: Primary brand Teal (identitas light mode) --- */ --gold: #12828F; --gold-soft: #1597A2; --gold-dim: #08717D; --gold-glow: rgba(18,130,143,.14); /* --- Status (pastel soft) --- */ --success: #76AD2F; --success-soft: rgba(118,173,47,.15); --info: #6C9BE8; --info-soft: rgba(108,155,232,.15); --warning: #B45309; --warning-soft: rgba(217,119,6,.14); --danger: #E8798E; --danger-soft: rgba(232,121,142,.15); /* --- Teks di atas aksen teal: putih --- */ --on-accent: #FFFFFF; /* --- Bayangan lembut --- */ --shadow-sm: 0 4px 15px rgba(80,120,125,.06); --shadow: 0 10px 30px rgba(80,120,125,.10); --shadow-gold: 0 8px 20px rgba(18,130,143,.20); /* --- Aliasing token semantik (Design System baru) --- */ --primary: var(--gold); --primary-soft: var(--gold-soft); --primary-dim: var(--gold-dim); --primary-glow: var(--gold-glow); --background: var(--bg-app); --surface: var(--bg-surface); --surface-light: var(--bg-surface-2); --surface-hover: var(--bg-hover); --text-primary: var(--text-strong); --text-secondary: var(--text-muted); --border: rgba(18,130,143,.14); } /* ---------- Reset ---------- */ *,*::before,*::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); background: var(--bg-app); color: var(--text-body); font-size: .92rem; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--gold-soft); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--gold); } img { max-width: 100%; display: block; } ::selection { background: var(--gold-glow); color: var(--text-strong); } /* ---------- Scrollbar ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-app); } ::-webkit-scrollbar-thumb { background: var(--bg-surface-3); border-radius: 6px; border: 2px solid var(--bg-app); } ::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); } /* ---------- Tipografi ---------- */ h1,h2,h3,h4,h5,h6 { color: var(--text-strong); font-weight: 700; letter-spacing: -.01em; margin: 0 0 .5rem; } .text-gold { color: var(--gold) !important; } .text-muted-2 { color: var(--text-muted) !important; } .fw-600 { font-weight: 600; } .fs-7 { font-size: .8rem; } .fs-8 { font-size: .72rem; } /* ---------- Heading halaman ---------- */ .page-title { font-size: 1.5rem; font-weight: 800; margin: 0; } .page-subtitle { color: var(--text-muted); font-size: .9rem; } /* ---------- Utility ---------- */ .bg-surface { background: var(--bg-surface) !important; } .border-soft { border-color: var(--border-color) !important; } .cursor-pointer { cursor: pointer; } .text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }