/* ============================================================================= design-system.css — "EXECUTIVE CONSTRUCTION ERP" SATU SUMBER KEBENARAN untuk seluruh token visual aplikasi. Identitas: NAVY + GOLD + WHITE. Dimuat PALING AWAL (sebelum app.css) — semua file CSS lain HANYA boleh memakai var(--...) dari sini, tidak boleh menulis nilai hex sendiri. Dengan begitu perubahan tema cukup dilakukan di satu berkas ini. Catatan arsitektur (penting untuk pemeliharaan): - Token "kanonik" memakai nama semantik baru (--brand, --accent, --surface, dst). Nama LAMA (--teal, --amber, --slate, --paper, --ink, dst) tetap dipertahankan sebagai ALIAS di app.css supaya ratusan referensi var() yang sudah tersebar di seluruh view/CSS tidak perlu disunting satu per satu — aman, dan tetap satu sumber warna. - Tidak ada gradasi/glow dekoratif di sini. Gold dipakai HANYA sebagai aksen (menu aktif, angka finansial penting, status menunggu approval), tidak pernah sebagai latar bidang lebar. ========================================================================== */ :root { color-scheme: light; /* ---------- 1. WARNA MERK ------------------------------------------------ */ /* ROMBAK "Neutral + Gold" (shadcn, September 2026, permintaan pengguna): skala "navy-*" DIPERTAHANKAN NAMANYA sebagai lapisan kompatibilitas — ratusan referensi var(--navy-*) & alias --slate/--shell yang tersebar di seluruh CSS/view ikut netral tanpa disunting satu per satu — tetapi NILAINYA kini ABU NETRAL (zinc), bukan lagi biru navy. Ini menyamakan dasar warna aplikasi dengan template referensi shadcn (monokrom netral), sementara identitas Gold dipertahankan sebagai SATU-SATUNYA aksen warna (tombol utama, menu aktif, angka finansial penting, fokus). */ --navy-950: #09090B; /* zinc-950 — dasar tergelap (sidebar) */ --navy-900: #18181B; /* zinc-900 — near-black, shell sidebar & tombol dark */ --navy-800: #212124; --navy-700: #2C2C31; --navy-600: #3F3F46; /* zinc-700 */ --navy-500: #52525B; /* zinc-600 */ --navy-400: #71717A; /* zinc-500 */ --navy-300: #A1A1AA; /* zinc-400 */ --navy-100: #E4E4E7; /* zinc-200 */ --navy-050: #F4F4F5; /* zinc-100 */ --gold-700: #85650F; --gold-600: #B08A1F; --gold-500: #D4A72C; /* ACCENT — Gold (satu-satunya warna merek) */ --gold-400: #E0BC5B; --gold-300: #EBD293; --gold-100: #F7EBC9; --gold-050: #FCF6E6; /* STRATEGI "Neutral + Gold" (shadcn): - --brand = NEAR-BLACK NETRAL → dipakai untuk bidang struktural bertext terang (bubble chat, FAB, selection/active state, progress, checkbox). Teks putih di atasnya tetap aman. Ini "primary" ala shadcn (monokrom). - GOLD dipakai SEBAGAI AKSEN yang dikelola hemat: tombol UTAMA (.btn-primary lewat --accent, lihat theme.css), menu sidebar aktif, TEKS tautan/outline (--brand-soft = gold pekat, lolos WCAG AA di atas putih), wash baris terpilih/aktif (--brand-tint = gold sangat muda), cincin fokus, & angka finansial penting. Dengan begitu Gold hadir sebagai identitas, bukan membanjiri seluruh UI. - --brand-foreground = ink gelap untuk teks DI ATAS bidang Gold (tombol primary), karena Gold terang → teks putih akan hilang. */ --brand: var(--navy-900); /* near-black netral */ --brand-strong: var(--navy-800); --brand-soft: var(--gold-700); /* AKSEN: teks tautan/outline (gold) */ --brand-tint: var(--gold-050); /* AKSEN: wash baris aktif/terpilih */ --brand-foreground: #1A1A1E; /* teks/ikon di atas bidang Gold */ --accent: var(--gold-500); --accent-strong:var(--gold-600); --accent-tint: var(--gold-050); /* ---------- 2. PERMUKAAN & TEKS ------------------------------------------ */ --bg: #F6F6F7; /* latar aplikasi — Neutral Gray (zinc-50/100) */ --bg-sunken: #EFEFF1; /* latar lebih dalam: thead, panel filter */ --surface: #FFFFFF; /* kartu, modal, dropdown */ --surface-alt: #FAFAFA; /* baris zebra, sub-panel */ --surface-hover: #F4F4F5; --shell: var(--navy-900); /* sidebar gelap netral (near-black) */ --shell-2: var(--navy-800); --text: #18181B; /* zinc-900 — teks utama */ --text-strong: #09090B; /* Muted Text. Brief menyebut #64748B; digelapkan tipis ke #5F6E82 karena pada nilai aslinya teks sekunder di atas latar halaman (--bg #F5F7FA) hanya mencapai 4.43:1 — sedikit di bawah ambang WCAG AA 4.5:1. Nuansanya tetap sama persis (slate abu-biru), hanya cukup pekat untuk lolos. */ --text-muted: #6B6B72; /* zinc-500 digelapkan tipis → lolos AA di atas --bg & putih */ --text-muted-strong: #52525B; /* zinc-600: header tabel, label di atas --bg-sunken */ --text-faint: #A1A1AA; /* zinc-400 */ --text-invert: #FFFFFF; --text-on-shell: #D4D4D8; /* teks di sidebar gelap (zinc-300) */ --text-on-shell-mute: #A1A1AA; /* label seksi sidebar (zinc-400) */ /* Sidebar & panel gelap SELALU berlatar navy di kedua tema, jadi teks di atasnya tidak boleh memakai --text-invert (yang sengaja berbalik mengikuti tema). Token ini tetap putih di light maupun dark. */ --text-on-shell-strong: #FFFFFF; --border: #E4E4E7; /* zinc-200 — border netral */ --border-strong: #D4D4D8; /* zinc-300 */ --border-subtle: #F0F0F1; --border-shell: rgba(255,255,255,.08); /* ---------- 3. WARNA STATUS ---------------------------------------------- */ --success: #16845B; --success-bg: #E6F4EE; --success-border: #B7DFCC; --warning: #C58A1A; --warning-bg: #FCF3E0; --warning-border: #EFD9A6; --danger: #C0392B; --danger-bg: #FBEAE8; --danger-border: #EFC2BC; --info: #2563EB; --info-bg: #E8EFFD; --info-border: #BFD3F8; /* Varian "-fg": warna status saat dipakai sebagai TEKS di atas latar tint (-bg) miliknya sendiri — mis. teks di dalam badge & alert. Warna dasar di atas dirancang untuk LATAR solid (teks putih di atasnya), sehingga sebagai teks di atas tint terang rasionya turun di bawah AA. Pola ini sudah dipakai --gold-fg sejak awal; di sini dilengkapi untuk semua status. */ --success-fg: #0F6B47; --warning-fg: var(--gold-700); --danger-fg: #A8281B; --info-fg: #1D4FBF; --neutral-fg: var(--neutral); --neutral: #56627A; --neutral-bg: #EEF2F7; --neutral-border: #DCE3EC; --gold-fg: var(--gold-700); --gold-bg: var(--gold-050); --gold-border: var(--gold-300); /* Status domain (dipakai badge) — dikunci sekali di sini supaya tidak ada lagi warna acak per halaman. Lihat §10 brief. */ --st-aktif: var(--success); --st-selesai: var(--info); --st-approval: var(--gold-700); --st-belum: #9C4708; /* orange — belum dibayar */ --st-belum-bg: #FDF0E3; --st-belum-border: #F3D5B4; --st-tolak: var(--danger); --st-draft: var(--neutral); /* ---------- 4. TIPOGRAFI -------------------------------------------------- */ --font-heading: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-numeric: 'Inter', ui-monospace, 'SFMono-Regular', monospace; --fs-display: 24px; --lh-display: 1.25; /* judul halaman besar */ --fs-title: 19px; --lh-title: 1.3; /* judul halaman */ --fs-section: 16px; --lh-section: 1.35; /* judul seksi */ --fs-card: 13px; --lh-card: 1.35; /* judul kartu (uppercase) */ --fs-body: 14px; --lh-body: 1.55; --fs-sm: 13px; --lh-sm: 1.5; --fs-caption: 12px; --lh-caption: 1.45; --fs-micro: 11px; --lh-micro: 1.4; --fs-kpi: 26px; --lh-kpi: 1.15; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --tracking-caps: .07em; /* ---------- 5. RUANG ------------------------------------------------------ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --gap-card: var(--sp-5); /* jarak antar kartu */ --pad-card: var(--sp-5); /* padding dalam kartu */ /* AUDIT September 2026: dulu var(--sp-7) = 32px. Itu satu-satunya pemakai token sp-7 di sini & menaikkan padding halaman desktop dari 24px (nilai di layout.css) jadi 32px di keempat sisi -- 64px ruang horizontal hilang di layar 1366px, padahal pengguna justru pernah minta jaraknya dipersempit ("24px kelewat jauh"). Disamakan ke 24px. */ --pad-page: var(--sp-6); /* padding konten halaman (desktop) */ --pad-cell-y: 10px; /* padding vertikal sel tabel */ --pad-cell-x: 14px; /* ---------- 6. BENTUK ----------------------------------------------------- */ /* Radius diselaraskan ke skala shadcn (base ~0.625rem/10px): sedikit lebih rapat dari sebelumnya supaya kartu/tombol terasa "clean & modern" khas shadcn, tanpa membuat sudut terlalu tajam. */ --radius-card: 12px; /* 4 variabel sudut kartu terpisah (tl/tr/br/bl) dipertahankan sebagai alias ke --radius-card supaya app.css/dashboard.css/theme.css yang sudah menulis border-radius per-sudut (mis. header kartu yang cuma membulatkan sisi atas) tidak perlu diubah. Panel Customizer yang dulu memungkinkan tiap sudut di-custom terpisah (slider "Sudut Kartu per Sisi") sudah dihapus -- keempatnya sekarang SELALU ikut --radius-card. */ --radius-card-tl: var(--radius-card); --radius-card-tr: var(--radius-card); --radius-card-br: var(--radius-card); --radius-card-bl: var(--radius-card); --radius-button: 8px; --radius-input: 8px; --radius-table: 10px; --radius-modal: 14px; --radius-badge: 999px; --radius-chip: 8px; --radius-sm: 6px; /* ---------- 7. BAYANGAN (halus, tanpa tint warna merk) -------------------- */ --shadow-xs: 0 1px 2px rgba(15,23,42,.05); --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04); --shadow-md: 0 1px 2px rgba(15,23,42,.05), 0 8px 20px -12px rgba(15,23,42,.18); --shadow-lg: 0 2px 4px rgba(15,23,42,.05), 0 16px 32px -16px rgba(15,23,42,.22); --shadow-modal: 0 24px 60px -20px rgba(15,23,42,.35); --shadow-shell: 1px 0 0 rgba(15,23,42,.06); --ring-width: 3px; --ring: 0 0 0 var(--ring-width) rgba(30,58,95,.16); --ring-accent: 0 0 0 var(--ring-width) rgba(212,167,44,.28); --ring-danger: 0 0 0 var(--ring-width) rgba(192,57,43,.20); /* ---------- 8. GERAK ------------------------------------------------------ */ --ease: cubic-bezier(.4,0,.2,1); --dur-fast: .12s; --dur: .18s; --dur-slow: .28s; /* ---------- 9. LAYOUT ----------------------------------------------------- */ --sidebar-w: 254px; /* PERBAIKAN (laporan pengguna: "masih kurang lebar" pada rel Mode Collapsible Sidebar "Icon") -- 72px sebelumnya terlalu sempit: ikon grup + ikon tautan jadi berdesakan nyaris tanpa jarak ke tepi rel, bikin kesan padat/mepet (di beberapa kombinasi ikon malah nyaris bersentuhan dgn tepi). Dilebarkan ke 88px (dipakai di semua penghitungan margin ".main"/".topbar" terkait lewat var ini juga -- assets/css/customizer.css §8/§9 -- jadi tidak perlu diubah manual satu per satu di tempat lain). */ --sidebar-w-collapsed: 88px; --header-h: 60px; --z-sidebar: 40; --z-topbar: 30; --z-backdrop: 39; --z-dropdown: 1050; --z-modal: 1055; --z-toast: 1090; } /* ============================================================================= MODE GELAP — tetap Navy + Gold, diturunkan ke bidang malam yang tenang. Hanya NILAI token yang berubah; tidak ada satu pun aturan komponen di sini. ========================================================================== */ [data-theme="dark"] { color-scheme: dark; --bg: #09090B; /* zinc-950 */ --bg-sunken: #101012; --surface: #18181B; /* zinc-900 — kartu/modal */ --surface-alt: #1F1F23; --surface-hover: #27272A; /* zinc-800 */ --shell: #09090B; --shell-2: #131316; --text: #FAFAFA; /* zinc-50 */ --text-strong: #FFFFFF; --text-muted: #A1A1AA; /* zinc-400 */ --text-muted-strong: #B4B4BB; --text-faint: #71717A; /* zinc-500 */ --text-invert: #18181B; --text-on-shell: #D4D4D8; --text-on-shell-mute: #A1A1AA; --border: rgba(255,255,255,.11); --border-strong: rgba(255,255,255,.17); --border-subtle: rgba(255,255,255,.06); --border-shell: rgba(255,255,255,.07); /* Navy tidak terbaca di atas latar malam: peran "brand yang terlihat" diambil alih Gold (tetap dalam identitas Navy+Gold), sementara --brand sendiri dinaikkan ke navy terang supaya latar tombol tetap kontras dengan teks putih. */ /* Neutral+Gold mode gelap: --brand = abu netral yang terlihat di atas latar malam (bidang selection/bubble/active), teks putih tetap aman. Gold tetap jadi aksen (tombol utama via --accent, teks tautan via --brand-soft). */ --brand: var(--navy-600); --brand-strong: var(--navy-500); --brand-soft: var(--gold-400); --brand-tint: #2A2210; --accent: var(--gold-500); --accent-strong:var(--gold-400); --accent-tint: #2A2210; --success: #34C98F; --success-bg: #102C24; --success-border: #1E4C3C; --warning: #E3AB49; --warning-bg: #2E2510; --warning-border: #4C3E1B; --danger: #F0685A; --danger-bg: #33201D; --danger-border: #56312C; --info: #5B9EE6; --info-bg: #14263D; --info-border: #23415F; /* Di mode gelap warna status sudah dirancang sebagai teks di atas latar malam, jadi varian -fg cukup sama dengan warna dasarnya. */ --success-fg: var(--success); --warning-fg: var(--gold-400); --danger-fg: var(--danger); --info-fg: var(--info); --neutral-fg: var(--neutral); --neutral: #94A3B8; --neutral-bg: #18243A; --neutral-border: #2A3A52; --gold-fg: var(--gold-400); --gold-bg: #2A2210; --gold-border: #4A3C15; --st-approval: var(--gold-400); --st-belum: #E39B4A; --st-belum-bg: #2F2312; --st-belum-border: #4E3A1C; --shadow-xs: 0 1px 2px rgba(0,0,0,.35); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 1px 2px rgba(0,0,0,.4), 0 8px 20px -12px rgba(0,0,0,.6); --shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 16px 32px -16px rgba(0,0,0,.7); --shadow-modal: 0 24px 60px -20px rgba(0,0,0,.8); --shadow-shell: 1px 0 0 rgba(255,255,255,.05); --ring: 0 0 0 var(--ring-width) rgba(147,176,203,.22); --ring-accent: 0 0 0 var(--ring-width) rgba(212,167,44,.32); --ring-danger: 0 0 0 var(--ring-width) rgba(240,104,90,.26); } /* ============================================================================= DASAR DOKUMEN ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-text); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--fw-semibold); color: var(--text-strong); margin: 0 0 .4em; letter-spacing: -.011em; } h1 { font-size: var(--fs-title); line-height: var(--lh-title); } h2 { font-size: var(--fs-section); line-height: var(--lh-section); } h3 { font-size: 15px; line-height: 1.35; } h4, h5, h6 { font-size: var(--fs-sm); line-height: var(--lh-sm); } a { color: var(--brand-soft); text-decoration: none; } a:hover { color: var(--brand); text-decoration: underline; } [data-theme="dark"] a { color: var(--gold-400); } [data-theme="dark"] a:hover { color: var(--gold-300); } hr { border: 0; border-top: 1px solid var(--border); opacity: 1; margin: var(--sp-5) 0; } ::selection { background: var(--navy-100); color: var(--navy-900); } [data-theme="dark"] ::selection { background: var(--navy-600); color: #fff; } /* Angka finansial: selalu rata & mudah dibandingkan antar baris. */ .num, .money, td.num, .money-input, .kpi-value, .tabular { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* Scrollbar aplikasi — tipis & netral, tidak mencolok. */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; } /* Fokus keyboard yang konsisten di seluruh aplikasi. */ :focus-visible { outline: 2px solid var(--brand-soft); outline-offset: 2px; } [data-theme="dark"] :focus-visible { outline-color: var(--gold-500); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }