/* ============================================================ SmartFin — DESIGN TOKENS · tema "MaterialM" ------------------------------------------------------------ Diturunkan dari material-m-nextjs-main.vercel.app (referensi pilihan klien). Menggantikan tema "Summit" — nilai berubah total, tapi TIAP NAMA TOKEN dipertahankan supaya 89 view dan 8 CSS halaman ikut berganti rupa tanpa disentuh. Tiga pergeseran besar dari tema sebelumnya: 1. MENGAMBANG, bukan bergaris. Kartu tidak lagi dipisah garis melainkan bayangan lembut abu-kebiruan (145,158,171) di atas halaman #f8fafd. Token --shadow-* yang dulu dipetakan ke `none` sekarang berisi elevasi sungguhan. 2. SERBA PIL. Tombol, lencana, dan chip membulat penuh. 3. BIRU LANGIT #00a1ff. Dipakai sebagai warna TANDA TANGAN (ikon, aksen, seri grafik) — BUKAN untuk isian tombol: putih di atasnya cuma 2,2:1. Isian & tautan memakai langkah 600/700 yang lebih gelap. Lihat catatan kontras di bawah. Urutan muat: tokens.css → smartfin.css → [css halaman] → components.css → materialm.css ============================================================ */ :root { /* ── Biru langit MaterialM. Skala penuh supaya tiap pemakaian punya langkah dengan kontras yang benar. ─────────────── Kontras terhadap PUTIH (teks butuh 4,5:1): 500 #00a1ff 2,2:1 → hiasan/ikon besar saja 600 #0077cc 4,7:1 → isian tombol + teks putih ✓ 700 #005f9e 6,6:1 → teks & tautan di atas putih ✓ */ --brand-50: #e6f5ff; --brand-100: #cceaff; --brand-200: #99d9ff; --brand-300: #4dc0ff; --brand-400: #1aacff; --brand-500: #00a1ff; /* warna tanda tangan MaterialM */ --brand-600: #0077cc; /* isian tombol (teks putih 4,7:1) */ --brand-700: #005f9e; /* teks & tautan di atas putih/tint */ --brand-800: #004a7c; /* Alias lama — dipertahankan supaya CSS & halaman yang sudah ada tetap jalan tanpa diedit. */ --primary: var(--brand-600); --primary-dark: var(--brand-700); --primary-darker: var(--brand-800); --primary-light: var(--brand-500); --primary-50: var(--brand-50); --primary-100: var(--brand-100); --primary-200: var(--brand-200); --primary-grad: linear-gradient(135deg, var(--brand-500), var(--brand-700)); /* ── Warna semantik MaterialM. Tiap keluarga punya 3 peran: (tanpa akhiran) = hiasan/ikon — warna asli template, -fill = latar + teks putih (sudah digelapkan ke ≥4,5:1), -50/-100 = tint, -strong = teks di atas tint. ───────── */ --success: #00ceb6; /* hijau toska MaterialM */ --success-fill: #00796b; --success-strong: #005f54; --success-50: #d2f9f4; /* = --bs-success-bg-subtle */ --success-100: #99ebe2; /* = --bs-success-border-subtle */ --warning: #ffae1f; /* build Bootstrap; build Tailwind #ffb900 */ --warning-fill: #8a6100; --warning-strong: #6b4b00; --warning-50: #fff1cc; /* = --bs-warning-bg-subtle */ --warning-100: #ffdfa5; /* = --bs-warning-border-subtle */ --danger: #ff6692; --danger-fill: #cc2a58; --danger-strong: #a31f45; --danger-50: #ffe4ec; /* = --bs-danger-bg-subtle */ --danger-100: #ffc2d3; /* = --bs-danger-border-subtle */ /* `--info` TETAP langkah biru gelap: ia dipakai sebagai warna TEKS di beberapa modul, dan cyan #46caeb di atas putih cuma 1,9:1. Rona cyan aslinya tetap tersedia sebagai hiasan lewat --info-tone + pastelnya. */ --info: var(--brand-600); --info-strong: var(--brand-700); --info-tone: #46caeb; /* = --bs-info, hiasan/ikon saja */ --info-50: #e1f5fa; /* = --bs-info-bg-subtle */ --info-100: #b5eaf7; /* = --bs-info-border-subtle */ /* Ungu = warna SEKUNDER MaterialM (--bs-secondary: #8965E5). `--secondary` sengaja dialiaskan ke sini, bukan diberi rona sendiri: dua nama untuk satu peran itulah yang bikin `--info` sempat salah dialias ke biru primary. */ --purple: #8965e5; --purple-fill: #6a45cf; --purple-strong: #54339f; --purple-50: #f3f0fc; /* = --bs-secondary-bg-subtle (10%) */ --purple-100: #e3daf9; /* teks/garis di atas bilah ungu pekat */ --purple-200: #cbbaf3; --secondary: var(--purple); --secondary-fill: var(--purple-fill); --secondary-50: var(--purple-50); /* ── PASTEL. Kartu pastel MaterialM = latar tint + BAYANGAN MATI (`card bg-*-subtle shadow-none`), radius tetap 24px seperti kartu putih. Yang di bawah ini bentuk semi-transparannya — dipakai kalau tint harus menumpang di atas permukaan yang BUKAN putih (menu aktif di sidebar, chip di dalam kartu bertint). Untuk latar kartu, pakai langkah -50 yang sudah pejal supaya tidak menumpuk jadi makin pekat. ────────── */ --brand-tint: rgba(0,161,255,.10); --purple-tint: rgba(137,101,229,.10); --secondary-tint: var(--purple-tint); --success-tint: rgba(0,206,182,.10); --warning-tint: rgba(255,174,31,.10); --danger-tint: rgba(255,102,146,.10); --info-tint: rgba(70,202,235,.10); /* Aksen — dipakai hemat: sematan, sorotan, CTA kedua */ --accent: var(--warning); --accent-dark: var(--warning-fill); --accent-50: var(--warning-50); --accent-100: var(--warning-100); /* ── Netral & permukaan (biru-keabuan, bukan abu netral) ── */ --dark: #111c2d; /* judul */ --dark-2: #1a2537; --dark-3: #2a3547; /* teks isi */ --muted: #5a6a85; /* teks sekunder DI ATAS PUTIH (5,6) */ --muted-strong: #46536b; /* teks sekunder di atas tint (≥4,5) */ --muted-2: #7b8893; /* HANYA ikon/garis — bukan teks */ --border: #e4ebf0; /* = --bs-border-color */ --border-soft: #eff4fa; /* = gray-200, pemisah di dalam kartu */ --border-strong: #dfe5ef; /* = gray-300, tepi kontrol */ --white: #ffffff; --card: #ffffff; --surface: #eff4fa; /* isian lembut (chip, hover) */ --surface-2: #e0e6eb; --sidebar-bg: #ffffff; /* sidebar PUTIH, tanpa garis kanan */ --bg: #f8fafd; /* halaman: putih kebiruan */ /* ── Layout. Diukur dari kerangka referensi: sidebar 270px, kepala halaman 72px, wadah isi max 1400px dengan sela `py-30 px-6` (30px tegak, 24px datar) dan `gap-30` antar kartu — 30px itu irama khas MaterialM, bukan 24px. ───── */ --sidebar-w: 260px; /* build Bootstrap; build Tailwind 270px */ --sidebar-collapsed-w: 74px; --navbar-h: 72px; --content-max: 1400px; /* ── Bentuk. Diukur dari referensi (rounded-3xl = 24px untuk KARTU, rounded-lg = 8px untuk KONTROL). Jarak dua langkah itu jauh — --radius-md mengisi tengahnya untuk lapisan melayang & petak kecil yang jadi konyol kalau 24px. ─── */ --radius-xs: 6px; --radius-sm: 8px; /* tombol, input, select */ --radius-md: 14px; /* dropdown, alert, petak */ --radius: 24px; /* KARTU — tanda tangan tema */ --radius-lg: 24px; --radius-xl: 28px; /* modal */ --radius-pill: 999px; /* ── Ritme spasi ────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --space-page: 30px; /* sela tegak wadah isi (py-30) */ --space-page-x: 24px; /* sela datar wadah isi (px-6) */ --gap-grid: 30px; /* sela antar kartu (gap-30) */ /* ── Tinggi kontrol ─────────────────────────────────────── */ --control-h: 42px; --control-h-sm: 34px; --control-h-lg: 48px; /* ── Elevasi — TANDA TANGAN tema ini: kartu diangkat bayangan, bukan dipisah garis. Nilai diambil dari kartu referensi (`shadow-md`: dua lapis, lembut, tidak menyebar jauh). ─ */ /* Bayangan kartu diambil dari build Bootstrap (--bs-box-shadow): SANGAT tipis dan berona biru-abu, bukan abu netral. Build Tailwind memakai `shadow-md` bawaan Tailwind yang jauh lebih pekat — di halaman penuh kartu seperti ini, yang pekat bikin tiap kartu terlihat seperti dialog melayang. */ --shadow-sm: 0 1px 2px rgba(133,146,173,.12); --shadow: 0 1px 4px rgba(133,146,173,.20); --shadow-card: var(--shadow); --shadow-md: 0 6px 16px rgba(133,146,173,.28); --shadow-pop: 0 20px 25px -5px rgba(0,0,0,.12), 0 8px 10px -6px rgba(0,0,0,.10); --shadow-lg: var(--shadow-pop); /* Sidebar TIDAK memakai bayangan kartu: di referensi ia melebar ke kanan-bawah dan nyaris tak terlihat (`shadow-boxShadow`). */ --shadow-sidebar: 7px 7px 10px rgba(0,0,0,.03); --ring: 0 0 0 3px rgba(0,161,255,.25); --ring-danger: 0 0 0 3px rgba(255,102,146,.28); --transition: all .16s cubic-bezier(.4,0,.2,1); /* ── Tipografi. MaterialM memakai Inter — sudah di-vendor lokal, jadi tidak ada berkas baru yang perlu diunduh. ─ */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; /* ── Skala z-index ──────────────────────────────────────── */ --z-sticky: 100; --z-overlay: 999; --z-sidebar: 1000; --z-popover: 1100; --z-modal: 1200; --z-toast: 1300; }