/* ===== Font (self-hosted). Satu keluarga font, sesuai DESIGN.md prinsip "one-font system" - MarkForMC diganti Sofia Sans (rekomendasi resmi dokumen itu sendiri: sudah ada di fallback stack Mastercard, open source, variable font jadi weight 450 bisa dipakai langsung). ===== */ @font-face { font-family: "Sofia Sans"; font-style: normal; font-weight: 1 1000; font-display: swap; src: url("../fonts/sofia-sans-normal.woff2") format("woff2"); } @font-face { font-family: "Sofia Sans"; font-style: italic; font-weight: 1 1000; font-display: swap; src: url("../fonts/sofia-sans-italic.woff2") format("woff2"); } /* ===== Design tokens (dari DESIGN.md §2, §5, §6) ===== */ :root { /* ink & cream - bukan Mastercard red/yellow (itu logo-only, gak dipakai) */ --ink: #141413; --charcoal: #262627; --slate: #696969; --dust: #d1cdc7; --canvas: #f3f0ee; --lifted: #fcfbfa; --surface: #ffffff; --bone: #f4f4f4; --border: rgba(20, 20, 19, 0.14); --border-strong: rgba(20, 20, 19, 0.28); /* signal orange - DESIGN.md: reserved buat konfirmasi/aksi penting, bukan CTA marketing umum. Di LUCU dipakai buat indikator aktif & aksi yang butuh perhatian (approve/reject), bukan tombol biasa. */ --signal: #cf4500; --signal-light: #f37338; --clay: #9a3a0a; --link-blue: #3860be; /* status semantik - fungsional, bukan bagian identitas brand, ditonalkan biar harmonis sama palet cream/ink/orange */ --success: #3f6b3b; --success-bg: #e9f0e5; --warning: #8a5a12; --warning-bg: #f7ecd8; --danger: #a83a2a; --danger-bg: #f7e8e4; /* pastel - permukaan gede (canvas/card) tetap netral cream/putih, tapi elemen kecil (stat tile, chip, badge) pakai warna yg lebih jenuh - "menyala" secukupnya, bukan pucat kayak versi awal. Bukan warna brand/semantik, murni variasi visual biar gak kosong/monoton. */ --pastel-blue-bg: #dfebfc; --pastel-blue: #2f5fb8; --pastel-purple-bg: #e9defb; --pastel-purple: #7c3fd1; --pastel-teal-bg: #d2f2e8; --pastel-teal: #0e9678; --pastel-rose-bg: #fbdce8; --pastel-rose: #c4275e; --font-body: "Sofia Sans", "SofiaSans", Arial, sans-serif; /* radius: DESIGN.md §5 - cuma 3 kelompok, gak ada 8-12px di tengah */ --radius-tiny: 6px; --radius: 28px; --radius-lg: 40px; --radius-pill: 999px; /* shadow: atmospheric, spread besar, opacity rendah (DESIGN.md §6) */ --shadow-1: 0 4px 24px rgba(20, 20, 19, 0.05); --shadow-2: 0 24px 48px rgba(20, 20, 19, 0.09); font-size: 16px; } /* ===== Dark mode ===== 3 opsi (tombol toggle di topbar, lihat assets/js/app.js): Auto (ikut prefers-color-scheme sistem), Terang (paksa), Gelap (paksa). Pilihan manual disimpan localStorage sbg atribut data-theme di - dicek PALING AWAL lewat inline