/* ===========================================================================
   SIAPTAB — Token Desain Bersama
   Berkas: public/shared/css/token.css

   Berkas ini HANYA memuat variabel (custom property). Tidak ada aturan
   tampilan di sini. Tujuannya: satu sumber kebenaran untuk warna, jarak,
   tipografi, dan sudut, sehingga tampilan antar peran tetap konsisten
   meski berkasnya terpisah.

   PENTING — INTI WHITE-LABEL:
   `--brand-primary` beserta turunannya disuntikkan ulang saat aplikasi
   dijalankan, berdasarkan `warna_primer` milik sekolah yang sedang
   membuka aplikasi (lihat shared/js/branding.js). Nilai di bawah hanya
   nilai awal sebelum data sekolah diterima.

   Skala warna memakai pola bertingkat 50–900 (50 paling muda, 900
   paling tua) agar pemilihan warna latar, garis, dan teks punya aturan
   yang jelas, bukan ditebak satu per satu.
   =========================================================================== */

:root {
  /* -------------------------------------------------------------------
     WARNA MEREK — disuntik ulang per sekolah saat aplikasi berjalan.
     ------------------------------------------------------------------- */
  --brand-primary: #1d4ed8;
  --brand-primary-hover: #1a43b8;
  --brand-primary-active: #163a9e;
  --brand-primary-soft: #eff4ff;   /* latar muda untuk sorotan */
  --brand-primary-border: #c7d7fe; /* garis bernuansa merek */
  --brand-on-primary: #ffffff;     /* teks di atas warna merek */

  /* -------------------------------------------------------------------
     NETRAL — tulang punggung antarmuka. Dipakai untuk latar, kartu,
     garis, dan hierarki teks.
     ------------------------------------------------------------------- */
  --netral-50: #f8fafc;
  --netral-100: #f1f5f9;
  --netral-200: #e2e8f0;
  --netral-300: #cbd5e1;
  --netral-400: #94a3b8;
  --netral-500: #64748b;
  --netral-600: #475569;
  --netral-700: #334155;
  --netral-800: #1e293b;
  --netral-900: #0f172a;

  /* -------------------------------------------------------------------
     WARNA STATUS — dipakai konsisten di seluruh aplikasi.

     Pemetaan status presensi ditetapkan di sini agar tidak ada
     perbedaan tafsir antar halaman:
       hadir     -> sukses (hijau)
       terlambat -> peringatan (kuning)
       izin      -> info (biru muda)
       sakit     -> info (biru muda)
       alpa      -> bahaya (merah)
     ------------------------------------------------------------------- */
  --sukses: #047857;
  --sukses-soft: #ecfdf5;
  --sukses-border: #a7f3d0;

  --peringatan: #b45309;
  --peringatan-soft: #fffbeb;
  --peringatan-border: #fde68a;

  --bahaya: #b91c1c;
  --bahaya-soft: #fef2f2;
  --bahaya-border: #fecaca;

  --info: #0369a1;
  --info-soft: #f0f9ff;
  --info-border: #bae6fd;

  /* -------------------------------------------------------------------
     PERMUKAAN & TEKS
     ------------------------------------------------------------------- */
  --latar: var(--netral-100);
  --permukaan: #ffffff;
  --permukaan-tenggelam: var(--netral-50);
  --garis: var(--netral-200);
  --garis-kuat: var(--netral-300);

  --teks-utama: var(--netral-800);
  --teks-kedua: var(--netral-600);
  --teks-redup: var(--netral-500);
  --teks-terbalik: #ffffff;

  /* -------------------------------------------------------------------
     TIPOGRAFI
     Memakai huruf sistem agar tidak ada permintaan jaringan tambahan
     dan tampilan terasa asli di tiap perangkat.
     ------------------------------------------------------------------- */
  --huruf-utama: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --huruf-angka: 'SF Mono', 'Cascadia Mono', Menlo, Consolas,
    'Liberation Mono', monospace;

  --ukuran-xs: 0.75rem;   /* 12px — label kecil, keterangan */
  --ukuran-sm: 0.8125rem; /* 13px — teks tabel */
  --ukuran-md: 0.875rem;  /* 14px — ukuran dasar antarmuka */
  --ukuran-lg: 1rem;      /* 16px — teks menonjol */
  --ukuran-xl: 1.25rem;   /* 20px — judul kartu */
  --ukuran-2xl: 1.5rem;   /* 24px — judul halaman */
  --ukuran-3xl: 1.875rem; /* 30px — angka besar dasbor */

  --tebal-normal: 400;
  --tebal-sedang: 500;
  --tebal-tegas: 600;
  --tebal-berat: 700;

  /* -------------------------------------------------------------------
     JARAK — kelipatan 4px agar perataan antar komponen rapi.
     ------------------------------------------------------------------- */
  --jarak-1: 0.25rem;  /*  4px */
  --jarak-2: 0.5rem;   /*  8px */
  --jarak-3: 0.75rem;  /* 12px */
  --jarak-4: 1rem;     /* 16px */
  --jarak-5: 1.25rem;  /* 20px */
  --jarak-6: 1.5rem;   /* 24px */
  --jarak-8: 2rem;     /* 32px */
  --jarak-10: 2.5rem;  /* 40px */
  --jarak-12: 3rem;    /* 48px */

  /* -------------------------------------------------------------------
     SUDUT & BAYANGAN
     Bayangan dibuat tipis — antarmuka ini bersifat kerja/administratif,
     bukan pamer efek.
     ------------------------------------------------------------------- */
  --sudut-sm: 6px;
  --sudut-md: 10px;
  --sudut-lg: 14px;
  --sudut-penuh: 999px;

  --bayang-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --bayang-md: 0 2px 8px rgba(15, 23, 42, 0.08);
  --bayang-lg: 0 8px 24px rgba(15, 23, 42, 0.10);
  --bayang-xl: 0 16px 40px rgba(15, 23, 42, 0.16);
  --bayang-fokus: 0 0 0 3px var(--brand-primary-border);

  /* -------------------------------------------------------------------
     TATA LETAK
     ------------------------------------------------------------------- */
  --lebar-sidebar: 248px;
  --lebar-sidebar-ringkas: 68px;
  --tinggi-header: 60px;
  --lebar-maks-isi: 1440px;

  /* -------------------------------------------------------------------
     GERAK
     ------------------------------------------------------------------- */
  --transisi-cepat: 120ms ease;
  --transisi-sedang: 200ms ease;

  /* -------------------------------------------------------------------
     LAPIS (z-index) — dinomori agar tidak ada perang angka acak.
     ------------------------------------------------------------------- */
  --lapis-sidebar: 100;
  --lapis-navigasi: 150;  /* sidebar & header kerangka dasbor */
  --lapis-header: 200;
  --lapis-tirai: 300;
  --lapis-modal: 400;
  --lapis-pesan: 500;
}

/* ---------------------------------------------------------------------
   Hormati preferensi pengguna yang meminta pengurangan gerak.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transisi-cepat: 0ms;
    --transisi-sedang: 0ms;
  }
}