/* ===================================================================== Token desain Gelora — SATU-SATUNYA tempat nilainya didefinisikan. Bahasa rancang: "Emerald Editorial" — gading hangat, garis rambut, nyaris tanpa bayangan, hijau pekat sebagai tanda kemewahan. ===================================================================== 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: #F6F5F1; /* kanvas gading hangat */ --surface-card: #FFFFFF; /* kartu */ --surface-sunken: #FBFAF7; /* 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 hangat tanpa satu pun selektor disunting. */ --card-background: var(--surface-card); /* ----------------------------------------------------------------- Garis — hangat, senada kanvas. Abu-abu dingin (#E5E7EB dsb.) di atas kanvas gading terbaca kotor kebiruan. Garis di bawah ini digeser ke arah hangat yang sama dengan kanvasnya. ----------------------------------------------------------------- */ --border-hairline: #E8E6E0; --border-strong: #D8D5CC; --border-light: #E8E6E0; /* alias lama, dipakai luas di main.css */ --border-dark-green: rgba(255, 255, 255, .1); /* ----------------------------------------------------------------- Merek ----------------------------------------------------------------- */ --g-shell-900: #052E29; /* latar sidebar & merek — teal paling pekat */ --g-shell-800: #0A423B; /* kartu gelap / spanduk */ --g-shell-700: #125E56; /* elemen interaktif di atas latar gelap */ --g-accent: #14B8A6; /* teal Gelora — warna aksi utama */ --g-accent-hover: #2DD4BF; /* hover MENERANG, bukan menggelap: teal gelap + tinta gelap pernah jatuh ke 2,62:1 dan membuat tombol tak terbaca. */ --g-accent-soft: rgba(20, 184, 166, .13); /* Tinta di ATAS warna aksi. Putih di atas teal hanya 2,5:1 — gagal WCAG. Tinta gelap ini terukur lolos, dipakai konsisten di semua tombol. Jangan diganti putih. */ --g-ink-on-accent: #04302B; /* Aksen kedua, dipakai hemat untuk penanda "perlu perhatian". */ --g-amber: #F59E0B; --g-ink-on-amber: #2B1A02; /* ----------------------------------------------------------------- Tinta ----------------------------------------------------------------- */ --text-main: #0B130F; /* judul & label utama */ /* Spark aslinya memakai #6C7E75 di sini. Terukur hanya 3,97:1 di atas kanvas dan 4,30:1 di atas kartu putih — dua-duanya gagal WCAG AA, padahal variabel ini dipakai untuk SEMUA label sekunder. Digelapkan ke 5,13:1 / 5,57:1; masih jelas terbaca sebagai teks sekunder. */ --text-muted-green: #5C6C61; /* 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: #5C6C61; --text-sidebar-muted: #879A91; /* label sidebar tidak aktif — 4,94:1 */ /* ----------------------------------------------------------------- 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: #0F766E; --status-occupied-bg: #F0FDFA; --status-occupied-line: #5EEAD4; --status-booked-ink: #B45309; --status-booked-bg: #FFFBEB; --status-booked-line: #FCD34D; --status-maint-ink: #6B6154; --status-maint-bg: #F7F6F3; --status-maint-line: #D8D5CC; /* ----------------------------------------------------------------- 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(9, 22, 17, .05); --shadow-overlay: 0 24px 48px rgba(9, 22, 17, .14); --shadow-sm: none; /* kartu: garis saja, tanpa bayangan */ --shadow-md: 0 1px 2px rgba(9, 22, 17, .05); --shadow-lg: 0 24px 48px rgba(9, 22, 17, .14); /* ----------------------------------------------------------------- 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; }