/* ===================================================================== Token desain Nexstadia — SATU-SATUNYA tempat nilainya didefinisikan. Sumber: Nexstadia_Brand_Identity_Guideline.pdf (Plan V1.3 §12.1). Navy #101D35 sebagai fondasi, Electric Blue untuk aksi, Cyan hanya aksen kecil di atas latar gelap, Ice Gray sebagai kanvas. Garis rambut, nyaris tanpa bayangan — bahasa rancang lama dipertahankan, hanya paletnya yang berganti. ===================================================================== Dipisahkan dari main.css karena gelora.css & bracket.css memakai token ini dan dipakai juga di halaman publik yang TIDAK memuat main.css. Waktu token masih menumpang di main.css, aturan seperti box-shadow: inset 3px 0 0 var(--g-accent) diam-diam gugur di halaman itu: var() yang tidak terdefinisi membuat seluruh deklarasi tidak sah, dan penanda pemenang di bagan turnamen hilang tanpa satu pun pesan galat. Muat berkas ini SEBELUM main.css, gelora.css, dan bracket.css. BERKAS INI HARUS AMAN DIMUAT DI HALAMAN MANA PUN — termasuk situs publik yang punya tema sendiri. Karena itu ia TIDAK BOLEH berisi override --bs-* atau aturan pada elemen. Murni token. Dua baris --bs-body-bg / --bs-body-font-family sengaja dipindah ke main.css supaya memuat berkas ini di layouts/public tidak mengubah warna latar dan font situs publik. CATATAN NAMA: token gelap dinamai --g-shell-*, BUKAN --g-ink-*. Nama --g-ink-700/900 sudah dipakai public/assets/css/public.css untuk arti yang berbeda, dan varian tema gelapnya (:root[data-theme="dark"]) menang atas :root biasa karena selektornya lebih spesifik. Akibatnya, di papan turnamen publik --g-ink-900 terbaca PUTIH, bukan teal pekat. Jangan kembalikan namanya. ===================================================================== */ :root { /* ----------------------------------------------------------------- Permukaan — tiga lapis. Kedalaman dibuat dari NILAI TERANG bertingkat + garis rambut, bukan dari bayangan. Ini keputusan sadar mengikuti arah 2026 yang menolak blur tebal & bayangan dalam ("anti-liquid-glass"): lebih terbaca, lebih murah dirender, dan tidak pernah mengaburkan teks. ----------------------------------------------------------------- */ --surface-canvas: #F3F6FB; /* Ice Gray — kanvas */ --surface-card: #FFFFFF; /* kartu */ --surface-sunken: #F8FAFD; /* kepala tabel, dasar panel dalam kartu */ /* Nama lama dipertahankan sebagai alias — 686 baris gelora.css dan 3151 baris main.css memakainya. Mengganti nilainya di sini membuat seluruh aplikasi ikut berganti tanpa satu pun selektor disunting. */ --card-background: var(--surface-card); /* ----------------------------------------------------------------- Garis — dingin, senada kanvas Ice Gray. ----------------------------------------------------------------- */ --border-hairline: #E3E8F0; --border-strong: #CDD5E1; --border-light: #E3E8F0; /* alias lama, dipakai luas di main.css */ --border-dark-green: rgba(255, 255, 255, .1); /* ----------------------------------------------------------------- Merek ----------------------------------------------------------------- */ --g-shell-900: #101D35; /* Nexstadia Navy — latar sidebar & merek */ --g-shell-800: #18284A; /* kartu gelap / spanduk */ --g-shell-700: #1D4ED8; /* elemen interaktif di atas latar gelap */ --g-accent: #1D4ED8; /* biru tombol Brand Guideline — warna aksi utama. BUKAN #246BFD: putih di atasnya hanya 4,57:1, pas-pasan untuk teks tombol 14px. #1D4ED8 = 6,7:1. */ --g-accent-hover: #1E40AF; /* hover MENGGELAP karena tintanya putih (8,7:1). */ --g-accent-soft: rgba(36, 107, 253, .12); --g-electric: #246BFD; /* Electric Blue — grafik, ilustrasi, ikon besar */ /* Aksen di ATAS latar gelap (sidebar Navy). Biru tombol di atas Navy hanya ±2,6:1; Cyan 8,3:1. Cyan TIDAK dipakai untuk teks kecil di latar terang (1,9:1 di atas putih). */ --g-accent-on-dark: #36C5F0; /* Tinta di ATAS warna aksi — putih, 6,7:1 di atas #1D4ED8. */ --g-ink-on-accent: #FFFFFF; /* Aksen kedua, dipakai hemat untuk penanda "perlu perhatian". */ --g-amber: #F59E0B; --g-ink-on-amber: #2B1A02; /* ----------------------------------------------------------------- Tinta ----------------------------------------------------------------- */ --text-main: #172033; /* Graphite — judul & label utama (15:1) */ /* Teks sekunder: 5,5:1 di atas Ice Gray, 5,96:1 di atas kartu putih. Nama "-green" peninggalan Gelora; dipakai di ratusan baris, jadi namanya dibiarkan, nilainya yang diganti. */ --text-muted-green: #5B6475; /* Eyebrow & label kolom tabel. Selalu tampil huruf kapital kecil ber-tracking lebar, yang secara optis terbaca lebih ringan dari ukurannya — jadi TIDAK boleh lebih terang dari muted. Dipakai nilai yang sama amannya. */ --text-eyebrow: #5B6475; --text-sidebar-muted: #8A97B0; /* label sidebar tidak aktif — 5,7:1 di atas Navy */ /* ----------------------------------------------------------------- Warna sistem ----------------------------------------------------------------- */ --sys-green: #22C55E; --sys-green-bg: #DCFCE7; --sys-red: #EF4444; --sys-red-bg: #FEE2E2; --sys-orange: #F97316; --sys-orange-bg: #FFEDD5; /* Status unit denah. Dipakai BERSAMA oleh legenda dan kotak unit supaya keduanya tidak pernah menyimpang. Warna tidak pernah jadi satu-satunya penanda — tiap status juga punya ikon. */ --status-available-ink: #15803D; --status-available-bg: #F0FDF4; --status-available-line: #86EFAC; --status-occupied-ink: #1D4ED8; --status-occupied-bg: #EFF4FF; --status-occupied-line: #93B4FD; --status-booked-ink: #B45309; --status-booked-bg: #FFFBEB; --status-booked-line: #FCD34D; --status-maint-ink: #5B6475; --status-maint-bg: #F3F6FB; --status-maint-line: #CDD5E1; /* ----------------------------------------------------------------- Tata letak ----------------------------------------------------------------- */ --sidebar-width: 280px; --navbar-height: 80px; /* ----------------------------------------------------------------- Jarak — skala 4/8. ----------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; /* ----------------------------------------------------------------- Radius — dirapatkan dari 6/10/14/18/24. Sudut membulat besar terbaca "aplikasi konsumen"; editorial menuntut sudut yang lebih tegas. Nama --radius-xxl dipertahankan karena main.css masih memakainya. ----------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-xxl: 18px; /* ----------------------------------------------------------------- Bayangan — hampir tidak ada. Hanya benda yang BENAR-BENAR melayang di atas halaman yang boleh punya bayangan: dropdown, popover, modal, laci. Kartu biasa cukup dibedakan garis rambut. Nama lama dipertahankan sebagai alias supaya main.css tidak perlu disunting; nilainya yang dikecilkan. ----------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(16, 29, 53, .06); --shadow-overlay: 0 24px 48px rgba(16, 29, 53, .16); --shadow-sm: none; /* kartu: garis saja, tanpa bayangan */ --shadow-md: 0 1px 2px rgba(16, 29, 53, .06); --shadow-lg: 0 24px 48px rgba(16, 29, 53, .16); /* ----------------------------------------------------------------- Lapis z — satu skala, supaya berhenti tebak-tebakan. ----------------------------------------------------------------- */ --z-sticky: 20; --z-dropdown: 40; --z-bottomnav: 60; --z-overlay: 100; --z-toast: 1000; /* ----------------------------------------------------------------- Gerak — satu irama untuk seluruh aplikasi. ----------------------------------------------------------------- */ --ease-out: cubic-bezier(.22, 1, .36, 1); --dur-fast: .14s; --dur-base: .2s; }