/* Token desain Check Paid — SATU-SATUNYA tempat warna didefinisikan.

   Dimuat oleh semua halaman sebelum lembar gayanya sendiri, jadi
   app.css dan portal.css memakai nilai yang sama persis. Sampai 28 Sep
   warnanya tersebar di tiga tempat (:root app.css, :root portal.css, dan
   body.hal-masuk), dan ketiganya sempat berbeda tanpa ada yang sadar. */

:root {
  /* ── Merek — merah Telkomsel ──────────────────────────────
     Satu-satunya sumber warna untuk SELURUH aplikasi, termasuk
     halaman depan dan halaman masuk. Sebelumnya palet tersebar di
     tiga tempat dan halaman masuk memakai hijau sendiri. */
  --r900: #A50017;  /* judul halaman & judul kartu */
  --r600: #E60012;  /* merah merek — tombol utama, tautan, ikon aktif */
  --r400: #FF3B4E;  /* merah sedang — batang grafik, titik status */
  --r200: #FF8A99;  /* merah muda — garis tepi saat disorot */
  /* Satu anak tangga antara r050 dan r200, untuk sorotan di atas r050. */
  --r100: #FAD3D8;
  --r050: #FDEAEC;  /* latar badge & kepala tabel */
  /* Komponen --r600 terpisah, supaya Chart.js bisa menyusun gradasi
     rgba() dari warna merek tanpa menuliskan angkanya sendiri. */
  --r600-rgb: 230, 0, 18;

  /* ── Permukaan ────────────────────────────────────────────
     Latar halaman PUTIH BERSIH. Tema lama memakai hijau sangat muda
     (--g050) sebagai latar halaman sekaligus latar sekunder; keduanya
     kini dipisah, karena menjadikan latar halaman merah muda akan
     membuat seluruh aplikasi terlihat merah jambu. */
  /* Latar halaman diambil dari mockup desain merah: abu sangat muda,
     BUKAN merah muda — halaman merah jambu justru yang dilarang. Kartu
     tetap putih bersih supaya isinya menonjol di atasnya. */
  --bg:      #F4F4F6;
  --surface: #FFFFFF;

  /* Merah muda paling pudar dari karya seni latar (checkpaid_bg.png),
     disampel dari mockup. Dipakai subjudul di kepala sidebar merah.
     Tiga nada yang lebih pekat sempat ada di sini untuk gelombang buatan
     gradien; setelah kembali memakai gambar aslinya, tidak terpakai lagi. */
  --hias4: #FFF6F7;

  /* ── Netral — latar sekunder, bukan merah ────────────────
     Dipakai untuk sorotan tombol, baris tabel, isian yang dimatikan:
     tempat-tempat yang dulu memakai --g050. */
  --n050: #F7F7F8;
  --n100: #F0F0F2;
  --n200: #E4E4E8;
  --n300: #CFCFD6;

  /* ── Teks ────────────────────────────────────────────────
     Netral, bukan hitam kehijauan seperti tema lama. */
  --ink:  #1A1A1E;
  --ink2: #55555E;
  /* Kontras ~4,6:1 di atas putih — ambang nyaman baca untuk 11-12px. */
  --ink3: #6E6E78;

  --line:  #E4E4E8;
  --line2: #F0F0F2;

  /* ── Aksen ───────────────────────────────────────────────
     Dipakai bila butuh penekanan yang BUKAN merah, supaya tidak
     bersaing dengan warna merek. */
  --navy: #16325C;

  /* ── Semantik — arti, bukan merek ────────────────────────
     Hijau "berhasil" dan oranye "perhatian" sengaja dipertahankan:
     artinya konvensi yang tidak ikut berubah saat merek berubah.
     Namanya diganti dari --up/--red supaya tidak dikira sisa tema hijau.

     --galat sengaja jauh lebih tua dan lebih kecokelatan daripada
     --r600. Dengan merek berwarna merah, pesan galat tidak bisa lagi
     menonjol hanya karena ia merah — jadi setiap keadaan galat WAJIB
     memakai ikon dan latar --galat050, bukan warna teks saja. */
  /* Digelapkan dari #1E8E5E: di atas --sukses050 kontrasnya hanya
     3,64:1, di bawah ambang baca untuk teks chip 11,5px. Kini 5,37:1. */
  --sukses:    #177049;
  --sukses050: #E6F4EC;
  --or:        #E8792B;
  --or100:     #FCEEE1;
  --or200:     #F3CFA8;
  --or700:     #A85214;
  --or900:     #7A3C0E;

  /* Permukaan gelap — blok catatan langkah pemuatan. */
  --gelap:      #1A1A1E;
  --gelap-teks: #E4E4E8;
  --galat:     #B42318;
  --galat050:  #FDECEC;
  /* Garis tepi untuk bilah status; dulu ditulis keras di dua tempat. */
  --sukses200: #BFE0CD;
  --galat200:  #F2C6BC;

  /* Gradasi merek — dipakai kartu halaman masuk. */
  --gradasi-merek: linear-gradient(135deg, #A50017, #E60012, #FF3B4E);

  /* Jarak — kelipatan 4 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;

  /* Sudut */
  --r-sm: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-full: 999px;

  /* Bayangan berlapis, makin tinggi makin lembut. Hitamnya netral;
     tema lama memakai hitam kehijauan (20,38,30). */
  --sh1: 0 1px 2px rgba(26,26,30,.05);
  --sh2: 0 1px 2px rgba(26,26,30,.04), 0 6px 20px rgba(26,26,30,.05);
  --sh3: 0 2px 4px rgba(26,26,30,.05), 0 14px 34px rgba(26,26,30,.09);
  --sh-fokus: 0 0 0 3px var(--r050);

  /* Gerak — satu kurva untuk semua keadaan, empat kecepatan.
     Kurvanya mulai bergerak cepat lalu melambat di ujung, jadi perubahan
     terasa langsung ditanggapi tanpa berhenti mendadak. */
  --e-out: cubic-bezier(.22, .61, .36, 1);

  --t-tekan: 90ms;   /* saat ditekan — harus terasa seketika */
  --t-kecil: 140ms;  /* latar baris tabel; lebih lama akan menjejak */
  --t-dasar: 220ms;  /* tombol, kartu, form, menu */
  --t-panel: 300ms;  /* laci, selubung, modal */

  --trans:       var(--t-dasar) var(--e-out);
  --trans-kecil: var(--t-kecil) var(--e-out);
  --trans-panel: var(--t-panel) var(--e-out);

  /* Kerangka */
  --sidebar: 272px;
  --topbar: 80px;
  --bilah: 52px;
  --gap: var(--s5);
  --pad-konten: clamp(16px, 2vw, 28px);
  --pad-kartu-y: clamp(18px, 1.6vw, 26px);
  --pad-kartu-x: clamp(18px, 1.8vw, 28px);

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}