/* ==========================================================================
   TOKEN DESAIN - SATU-SATUNYA SUMBER KEBENARAN
   ==========================================================================

   Berkas ini memuat warna, tipografi, dan skala spacing resmi. Dimuat di
   KETIGA layout (common, admin, auth) SEBELUM stylesheet masing-masing, agar
   style.css / app.css / auth.css tinggal memakainya.

   Sebelumnya ketiga stylesheet itu mendeklarasikan :root sendiri-sendiri
   dengan nama token yang sama tetapi nilai yang BERBEDA, sehingga "--primary"
   berarti biru yang berlainan tergantung halaman mana yang sedang dibuka.
   Jangan mendeklarasikan ulang token di bawah pada berkas lain: begitu itu
   terjadi, masalah yang sama kembali.

   Menambah atau mengubah warna? Lakukan DI SINI, bukan di stylesheet lain,
   dan jangan menulis hex langsung di Blade.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     1. WARNA BRAND RESMI
     Ketiganya lolos WCAG AA untuk teks putih di atasnya (rasio kontras
     terhadap putih: navy 13,96:1 - merah 7,57:1 - hijau 5,38:1), sehingga
     aman dipakai sebagai latar tombol maupun panel.
     ---------------------------------------------------------------------- */
  --brand-navy:  #062A5F;
  --brand-red:   #A9110D;
  --brand-green: #1B7A3E;

  /* Versi komponen RGB, untuk keperluan rgba(). Nilainya WAJIB sinkron
     dengan hex di atas. */
  --brand-navy-rgb:  6, 42, 95;
  --brand-red-rgb:   169, 17, 13;
  --brand-green-rgb: 27, 122, 62;

  /* Navy yang lebih gelap, diturunkan dari --brand-navy (hue dan saturasi
     sama, lightness 19,8% -> 12%). Dipakai sebagai latar bagian yang perlu
     lebih pekat daripada navy utama. */
  --brand-navy-dark: #04193A;

  /* ----------------------------------------------------------------------
     2. PERAN SEMANTIK
     Stylesheet memakai nama peran di bawah, bukan nama warna. Dengan begitu
     penyesuaian brand cukup dilakukan pada blok 1 di atas.
     ---------------------------------------------------------------------- */
  --primary:     var(--brand-navy);
  --secondary:   var(--brand-red);
  --accent:      var(--brand-green);

  --primary-rgb:   var(--brand-navy-rgb);
  --secondary-rgb: var(--brand-red-rgb);
  --accent-rgb:    var(--brand-green-rgb);

  /* Dipakai style.css untuk latar yang lebih pekat. Nama '--primary2' tidak
     deskriptif, tetapi dipertahankan karena masih dirujuk stylesheet lama;
     pakailah --brand-navy-dark untuk kode baru. */
  --primary2: var(--brand-navy-dark);

  /* ----------------------------------------------------------------------
     3. NETRAL
     ---------------------------------------------------------------------- */
  --white:      #ffffff;
  --light-gray: #f8f9fa;
  --dark-gray:  #343a40;

  /* Teks abu-abu sekunder. Nilainya 5,74:1 terhadap putih sehingga lolos
     WCAG AA untuk teks berukuran normal. Sebelumnya #777 dipakai untuk peran
     ini, dan rasionya hanya 4,48:1 - gagal ambang AA (4,5:1). */
  --muted-text: #666666;

  /* --dark dan --light dirujuk style.css (8 tempat) tetapi TIDAK PERNAH
     didefinisikan di mana pun, sehingga selama ini var() itu gagal resolve
     dan properti warnanya berperilaku seolah tidak ditulis. Didefinisikan di
     sini sebagai alias agar pemakaian yang sudah ada berfungsi sebagaimana
     maksudnya. Untuk kode baru, pakai nama lengkapnya. */
  --dark:  var(--dark-gray);
  --light: var(--light-gray);

  /* ----------------------------------------------------------------------
     4. TIPOGRAFI
     Situs publik memakai font brand; panel admin memakai font sistem karena
     kepadatan antarmukanya berbeda dan tidak menuntut identitas brand.
     ---------------------------------------------------------------------- */
  --font-public: "SerithaiExpanded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-admin:  "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

  /* ----------------------------------------------------------------------
     5. SKALA SPACING
     Sengaja dibuat identik dengan skala spacer Bootstrap 5 yang sudah dipakai
     luas lewat kelas seperti mb-3, g-4, dan py-5. Menyamakannya berarti CSS
     kustom dan kelas utilitas Bootstrap berada pada irama yang sama, bukan
     dua skala paralel yang saling meleset.

       --space-1  0.25rem  setara mb-1 / p-1
       --space-2  0.5rem   setara mb-2 / p-2
       --space-3  1rem     setara mb-3 / p-3
       --space-4  1.5rem   setara mb-4 / p-4
       --space-5  3rem     setara mb-5 / p-5

     --space-6 adalah perpanjangan di luar skala Bootstrap, untuk jarak antar
     bagian besar pada landing page.

     Catatan: nilai spacing yang sudah tertulis di stylesheet TIDAK disisir
     satu per satu ke token ini. Tanpa skala acuan, "tidak konsisten" hanyalah
     opini; skala ini adalah acuannya, dan penyisirannya dapat dikerjakan
     bertahap saat komponennya memang sedang disentuh.
     ---------------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 3rem;
  --space-6: 4.5rem;

  /* ----------------------------------------------------------------------
     6. TITIK HENTI (BREAKPOINT)
     Nilai rujukan agar media query kustom memakai angka yang sama dengan
     Bootstrap 5, bukan angka karangan sendiri. CSS tidak dapat memakai var()
     di dalam @media, jadi token ini bersifat dokumentasi: angkanya tetap
     ditulis manual di media query, tetapi HARUS mengikuti daftar ini.

       sm  >= 576px    md  >= 768px    lg  >= 992px
       xl  >= 1200px   xxl >= 1400px
     ---------------------------------------------------------------------- */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-xxl: 1400px;
}