/* Token warna & ukuran — SATU-SATUNYA tempat nilai mentah ditulis. * * Berkas lain (layout, components, dan CSS milik module) hanya boleh memakai * var(--…). Dengan begitu tema gelap cukup mendefinisikan ulang token di sini, * tanpa menyentuh satu pun aturan komponen. * * Tema ditentukan atribut data-theme pada : * tidak ada -> ikut preferensi sistem (prefers-color-scheme) * data-theme=light -> paksa terang * data-theme=dark -> paksa gelap * Nilainya disimpan di localStorage oleh static/ui/js/shell.js. */ :root { /* Bootstrap 5.3 Variable Bridge */ --bs-primary: #2563eb; --bs-primary-rgb: 37, 99, 235; --bs-success: #16a34a; --bs-success-rgb: 22, 163, 74; --bs-warning: #d97706; --bs-warning-rgb: 217, 119, 6; --bs-danger: #dc2626; --bs-danger-rgb: 220, 38, 38; --bs-info: #0891b2; --bs-info-rgb: 8, 145, 178; --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --bs-body-font-size: 0.875rem; --bs-body-line-height: 1.55; --bs-body-bg: #f4f6f9; --bs-body-color: #16202e; --bs-border-radius: 8px; --bs-border-radius-sm: 6px; --bs-border-radius-lg: 12px; --bs-border-color: #e2e8f0; --bs-card-bg: #ffffff; --bs-card-border-color: #e2e8f0; --bs-card-cap-bg: #ffffff; /* Netral */ --bg: #f4f6f9; --surface: #ffffff; --surface-2: #f8fafc; --surface-hover: #eef2f7; --border: #e2e8f0; --border-strong: #cbd5e1; /* Teks */ --text: #16202e; --text-muted: #64748b; --text-faint: #94a3b8; --text-invert: #ffffff; /* Aksen */ --primary: #2563eb; --primary-hover: #1d4ed8; --primary-soft: #eff4ff; --primary-text: #1d4ed8; /* Semantik */ --success: #16a34a; --success-soft: #ecfdf5; --success-text: #166534; --warning: #d97706; --warning-soft: #fffbeb; --warning-text: #92400e; --danger: #dc2626; --danger-soft: #fef2f2; --danger-text: #991b1b; --info: #0891b2; --info-soft: #ecfeff; --info-text: #155e75; /* Bentuk */ --radius: 8px; --radius-sm: 6px; --radius-lg: 12px; --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .10); --shadow-lg: 0 10px 30px rgba(15, 23, 42, .12); /* Ukuran kerangka */ --sidebar-w: 256px; --sidebar-collapsed: 64px; --topbar-h: 56px; /* Tipografi */ --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Tema gelap — HANYA token yang didefinisikan ulang. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bs-body-bg: #0f172a; --bs-body-color: #e6edf7; --bs-border-color: #2a3654; --bs-card-bg: #161f33; --bs-card-border-color: #2a3654; --bs-card-cap-bg: #161f33; --bs-tertiary-bg: #1c2740; --bs-emphasis-color: #e6edf7; --bs-emphasis-color-rgb: 230, 237, 247; --bs-secondary-color: #97a6c0; --bs-secondary-color-rgb: 151, 166, 192; --bs-tertiary-color: #6b7c99; --bs-tertiary-color-rgb: 107, 124, 153; --bs-light: #1c2740; --bs-light-rgb: 28, 39, 64; --bs-dark: #e6edf7; --bs-dark-rgb: 230, 237, 247; --bs-secondary: #97a6c0; --bs-secondary-rgb: 151, 166, 192; --bs-table-bg: #161f33; --bs-table-striped-bg: #1c2740; --bs-table-hover-bg: #223050; --bs-table-color: #e6edf7; --bs-table-border-color: #2a3654; --bs-modal-bg: #161f33; --bs-modal-border-color: #2a3654; --bs-modal-header-border-color: #2a3654; --bs-modal-footer-border-color: #2a3654; --bs-danger-bg-subtle: #2c1416; --bs-danger-border-subtle: #7f1d1d; --bs-danger-text-emphasis: #fca5a5; --bs-warning-bg-subtle: #2b1f0c; --bs-warning-border-subtle: #78350f; --bs-warning-text-emphasis: #fcd34d; --bs-success-bg-subtle: #10261c; --bs-success-border-subtle: #14532d; --bs-success-text-emphasis: #86efac; --bs-info-bg-subtle: #0d2530; --bs-info-border-subtle: #164e63; --bs-info-text-emphasis: #7dd3fc; --bs-primary-bg-subtle: #1c2b4a; --bs-primary-border-subtle: #1e3a8a; --bs-primary-text-emphasis: #bfdbfe; --bg: #0f172a; --surface: #161f33; --surface-2: #1c2740; --surface-hover: #223050; --border: #2a3654; --border-strong: #3b4a6b; --text: #e6edf7; --text-muted: #97a6c0; --text-faint: #6b7c99; --primary: #60a5fa; --primary-hover: #93c5fd; --primary-soft: #1c2b4a; --primary-text: #bfdbfe; --success-soft: #10261c; --success-text: #86efac; --warning-soft: #2b1f0c; --warning-text: #fcd34d; --danger-soft: #2c1416; --danger-text: #fca5a5; --info-soft: #0d2530; --info-text: #7dd3fc; --shadow: 0 1px 2px rgba(0, 0, 0, .40), 0 1px 3px rgba(0, 0, 0, .30); --shadow-lg: 0 10px 30px rgba(0, 0, 0, .45); } } :root[data-theme="dark"] { --bs-body-bg: #0f172a; --bs-body-color: #e6edf7; --bs-border-color: #2a3654; --bs-card-bg: #161f33; --bs-card-border-color: #2a3654; --bs-card-cap-bg: #161f33; --bs-tertiary-bg: #1c2740; --bg: #0f172a; --surface: #161f33; --surface-2: #1c2740; --surface-hover: #223050; --border: #2a3654; --border-strong: #3b4a6b; --text: #e6edf7; --text-muted: #97a6c0; --text-faint: #6b7c99; --primary: #60a5fa; --primary-hover: #93c5fd; --primary-soft: #1c2b4a; --primary-text: #bfdbfe; --success-soft: #10261c; --success-text: #86efac; --warning-soft: #2b1f0c; --warning-text: #fcd34d; --danger-soft: #2c1416; --danger-text: #fca5a5; --info-soft: #0d2530; --info-text: #7dd3fc; --shadow: 0 1px 2px rgba(0, 0, 0, .40), 0 1px 3px rgba(0, 0, 0, .30); --shadow-lg: 0 10px 30px rgba(0, 0, 0, .45); }