/* ==========================================================================
   TOKENS — Tema "BRUTAL" (Neo-Brutalism)
   Sumber tunggal untuk warna, tipografi, spasi, bentuk, dan gerak.
   Ubah di sini, seluruh situs ikut. Jangan menulis hex mentah di berkas lain.

   Identitas diambil utuh dari spesifikasi tema BRUTAL: empat warna murni
   (merah/biru/kuning + hitam-putih), font Syne untuk judul dan Manrope untuk
   teks, border hitam 3px, sudut 0 di mana-mana, dan bayangan KERAS ber-offset
   (Npx Npx 0) — bukan blur. Interaksi khasnya: elemen "ditekan turun" saat
   hover/klik, bergeser ke arah bayangannya sementara bayangannya mengecil.

   Rujukan keputusan: DECISIONS.md CP-24 (menggantikan CP-19 "Neo-Brutalist RT",
   yang sendiri menggantikan CP-05 "Editorial Ledger").
   ========================================================================== */

/* ==========================================================================
   FONT DIMUAT DARI SINI, BUKAN DARI CDN GOOGLE

   Sebelumnya tiap halaman memanggil fonts.googleapis.com lewat <link>. Itu
   berarti tipografi seluruh situs bergantung pada permintaan jaringan yang
   bisa gagal — dan di dalam aplikasi Android yang memang dirancang jalan
   tanpa internet, ia PASTI gagal setiap kali warga sedang offline. Yang
   terlihat bukan "sedang offline", melainkan judul dan angka rupiah yang
   tiba-tiba berganti font sistem: aplikasinya terlihat rusak justru pada
   saat ia sebenarnya bekerja persis seperti seharusnya.

   Keduanya adalah font VARIABEL, jadi satu berkas per keluarga sudah memuat
   seluruh rentang bobot yang dipakai proyek ini (600–800 untuk judul,
   400–800 untuk teks). Total 58 KB — lebih kecil daripada kumpulan berkas
   statis yang akan diunduh CDN untuk bobot-bobot yang sama.

   Hanya subset LATIN yang disertakan. Seluruh isi situs berbahasa Indonesia
   dan tidak memakai satu pun karakter di luar rentang itu.

   Situs juga ikut untung: satu perjalanan pulang-pergi ke CDN hilang dari
   jalur render kritis setiap halaman.

   Rujukan keputusan: DECISIONS.md CP-27.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  /* Rentang, bukan satu angka — inilah cara font variabel dideklarasikan.
     Menuliskannya sebagai `font-weight: 700` akan membuat peramban
     mensintesis bobot lain dengan menebalkan garis secara kasar. */
  font-weight: 600 800;
  font-display: swap;
  src: url('../font/archivo-latin-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../font/manrope-latin-var.woff2') format('woff2');
}

:root {
  /* --- Palet inti ----------------------------------------------------------
     Empat warna aksen saja, semuanya PRIMER MURNI — tidak ada tint, shade,
     atau gradien. Kedalaman dibawa oleh border tebal dan bayangan keras,
     bukan oleh variasi warna. Ini inti dari bahasa neo-brutalist. */
  --brutal-red:    #FF0000;
  --brutal-blue:   #0000FF;
  --brutal-yellow: #FFFF00;

  /* --- Permukaan ------------------------------------------------------------
     Putih murni. Bukan kertas hangat — brutalism tidak berpura-pura jadi
     benda fisik. Dua abu netral hanya untuk isian yang sengaja diredam
     (kepala tabel, sel terkunci), bukan untuk membentuk hierarki. */
  --paper:          #FFFFFF;
  --surface:        #FFFFFF;
  --surface-alt:    #F5F5F5;
  --surface-sunk:   #EBEBEB;

  /* --- Tinta ----------------------------------------------------------------
     Hitam penuh, bukan "hampir hitam". --ink-3 dipatok #666666 persis seperti
     --text-muted di spesifikasi: 5.74:1 di atas putih, aman untuk teks kecil. */
  --ink:            #000000;
  --ink-2:          #333333;   /* 12.6:1 — paragraf sekunder */
  --ink-3:          #666666;   /* 5.74:1 — label eyebrow, keterangan kaki */

  /* --- Garis ----------------------------------------------------------------
     SEMUA border hitam penuh, termasuk pemisah internal. Tidak ada garis
     rambut abu-abu di tema ini; kalau sebuah garis tidak layak hitam, garis
     itu tidak layak ada. --line-soft tetap ada sebagai nama supaya komponen
     lama tidak perlu diubah, tapi nilainya kini sama-sama hitam. */
  --line:           #000000;
  --line-soft:      #000000;
  --line-strong:    #000000;

  /* Footer kini putih dengan garis atas hitam tebal (spesifikasi bagian 8),
     menggantikan latar biru-navy #0D1117 dari tema sebelumnya. Navy bukan
     bagian dari palet BRUTAL. */
  --footer-bg:      #FFFFFF;

  /* --- Aksen interaktif -----------------------------------------------------
     Biru = tautan, fokus, dan pos "Iuran". 8.59:1 di atas putih, jadi aman
     dipakai sebagai warna teks berukuran berapa pun. */
  --accent:         #0000FF;
  --accent-hover:   #0000CC;
  --accent-soft:    #E0E0FF;
  --accent-line:    #0000FF;

  /* Kuning CTA — SELALU sebagai isian dengan teks hitam di atasnya, tidak
     pernah sebagai warna teks (1.07:1 di atas putih, mustahil terbaca). */
  --highlight:      #FFFF00;
  --highlight-ink:  #000000;

  /* --- Merah kritis ---------------------------------------------------------
     #FF0000 di atas putih hanya 4.0:1 — LULUS untuk teks besar (≥24px, atau
     ≥18.7px tebal) tapi GAGAL untuk teks kecil. Karena situs ini dibaca warga
     sepuh (CP-06), pembagiannya dibuat eksplisit:

       --critical      → isian, border, angka besar, judul yang disorot
       --critical-ink  → SATU-SATUNYA merah yang boleh jadi teks kecil (5.53:1)

     Pola yang sama sudah dipakai tema sebelumnya untuk kuning
     (--pos-ipal-ink), jadi ini bukan pengecualian baru. */
  --critical:       #FF0000;
  --critical-ink:   #D40000;
  --critical-soft:  #FFE0E0;
  --critical-line:  #FF0000;

  /* --- Tiga pos dana --------------------------------------------------------
     Warna hanya penguat, tidak pernah satu-satunya penyampai makna — selalu
     didampingi huruf I/P/L di matrik iuran. Iuran = biru, IPAL = kuning,
     Lelayu = merah. */
  --pos-iuran:      #0000FF;
  --pos-ipal:       #FFFF00;
  --pos-lelayu:     #FF0000;
  --pos-iuran-soft: #E0E0FF;
  --pos-ipal-soft:  #FFFACC;
  --pos-lelayu-soft:#FFE0E0;

  /* Kuning murni sebagai warna TEKS mustahil dibaca. Nilai amber gelap ini
     dipakai di tempat pos-ipal muncul sebagai teks/ikon, bukan isian (7.34:1). */
  --pos-ipal-ink:   #665500;

  /* --- Fokus ----------------------------------------------------------------
     Cincin fokus brutalist: kotak tegas, bukan halo lembut. Dua lapis supaya
     tetap terlihat baik di atas putih maupun di atas isian berwarna. */
  --focus:          #0000FF;
  --focus-ring:     0 0 0 3px var(--paper), 0 0 0 6px var(--focus);

  /* --- Latar halaman --------------------------------------------------------
     Aurora blur dan butiran kertas DIMATIKAN permanen: efek lembut
     bertentangan langsung dengan bahasa yang datar dan tegas. Yang tersisa
     hanya kisi garis 40px — pola dekoratif `.grid-pattern` dari spesifikasi,
     dipakai sebagai latar halaman yang sangat diredam. */
  --aurora-a:       #0000FF;
  --aurora-b:       #FF0000;
  --aurora-opacity: 0;
  --grid-opacity:   0.06;
  --grain-opacity:  0;
  --grid-size:      40px;

  /* --- Tipografi ------------------------------------------------------------
     KETERBACAAN MENANG ATAS GAYA. Pembacanya warga sepuh (CP-06) dan isinya
     angka uang — kalau sebuah huruf atau angka bisa salah dibaca, desainnya
     gagal, sebagus apa pun tampilannya.

     Spesifikasi BRUTAL meminta Syne untuk judul. Syne DILEPAS (lihat CP-25):
     ia font display geometris dengan bentuk huruf nyeleneh, dan dipakai di
     ukuran kecil — apalagi untuk ANGKA RUPIAH — jadi sulit dibaca. Nilai
     brutalis tema ini sebenarnya tidak dibawa oleh font sama sekali,
     melainkan oleh border 3px, bayangan keras, sudut 0, dan warna primer.
     Jadi font bisa diganti tanpa kehilangan identitas sedikit pun.

     Archivo menggantikannya: grotesque dengan x-height besar, apertur
     terbuka (c/e/a/s tidak menutup), dan bentuk 1/l/I serta 0/O yang jelas
     berbeda — dirancang justru untuk tetap terbaca di ukuran kecil, tapi
     tetap punya bobot 800 yang tegas untuk judul raksasa. Archivo juga
     sudah pernah dipakai proyek ini (CP-19), jadi sudah terbukti cocok.

     Angka memakai Manrope + `tabular-nums` (lihat .num di base.css): satu
     lebar untuk semua digit sehingga kolom rupiah lurus, dengan bentuk
     angka yang lugas — bukan angka geometris yang harus ditebak. */
  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-text:    'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-num:     'Manrope', 'Segoe UI', system-ui, sans-serif;

  /* Basis 17px (bukan 16px) dipertahankan dari CP-06 — dinaikkan demi warga
     sepuh. Semua ukuran memakai rem, jadi satu angka ini menggeser seluruh
     skala. Skala di bawah sengaja jauh lebih ekstrem daripada tema lama:
     judul brutalist harus terasa terlalu besar. */
  /* Ukuran kecil dinaikkan dari revisi pertama (0.72/0.8/0.88rem). Pada basis
     17px itu jatuh ke 12,2px untuk label — terlalu kecil untuk mata sepuh,
     apalagi label di tema ini uppercase dan ber-tracking lebar. Sekarang
     lantainya 13,6px. */
  --fs-2xs:  0.8rem;
  --fs-xs:   0.86rem;
  --fs-sm:   0.94rem;
  --fs-base: 1rem;
  --fs-md:   1.2rem;
  --fs-lg:   1.5rem;
  /* Batas BAWAH tiap clamp ditentukan oleh kata terpanjang yang harus muat
     di layar 320px, bukan dipilih karena enak dilihat. Judul brutalist tidak
     bisa membungkus di tengah kata tanpa terlihat rusak, jadi kata seperti
     "TERBUKA" (hero) dan "OPERASIONAL" (judul halaman) yang menetapkan
     lantainya. Batas atas tetap besar — di desktop judul memang harus terasa
     terlalu besar. */
  --fs-xl:   clamp(1.7rem, 1.4rem + 2.2vw, 2.6rem);
  --fs-2xl:  clamp(1.85rem, 1.1rem + 3.4vw, 3.6rem);
  --fs-3xl:  clamp(2.2rem, 1.3rem + 5vw, 4.6rem);
  --fs-hero: clamp(1.9rem, 0.6rem + 6.6vw, 6rem);

  /* Revisi pertama memakai 1:1 persis ("judul menumpuk", ciri brutalist).
     Itu terlalu rapat begitu judulnya lebih dari satu baris — baris saling
     bersentuhan dan mata kehilangan jejak saat pindah baris. 1.1 masih
     terbaca rapat dan tegas, tapi tiap baris punya ruang sendiri. */
  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-base:  1.65;
  --lh-loose: 1.75;

  /* Tracking negatif merapatkan huruf sampai saling menempel — musuh
     keterbacaan. Archivo tidak butuh dirapatkan seperti Syne, jadi nilainya
     dibuat nyaris netral; hanya judul raksasa yang sedikit dirapatkan
     (lihat .hero__title). */
  --ls-display: -0.005em;
  --ls-tight:    0em;
  --ls-label:    0.05em;   /* tracking-wider pada label uppercase pendek */

  /* --- Spasi (kelipatan 4) --------------------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  --section-y: clamp(3rem, 2rem + 5vw, 5rem);
  --gutter:    clamp(1.15rem, 0.6rem + 2.6vw, 3rem);
  --measure:   68ch;
  --container: 1280px;   /* max-w-7xl, sesuai spesifikasi bagian 5 */
  --container-narrow: 860px;

  /* --- Bentuk ---------------------------------------------------------------
     NOL di semua tempat, tanpa kecuali — termasuk --r-pill. Tema sebelumnya
     masih menyisakan lencana bulat; spesifikasi BRUTAL menutup celah itu:
     "tidak ada sudut membulat sama sekali". Karena hampir seluruh komponen
     memakai variabel ini, cukup diubah di sini. */
  --r-sm:   0px;
  --r-md:   0px;
  --r-lg:   0px;
  --r-xl:   0px;
  --r-pill: 0px;

  /* --- Ketebalan border -----------------------------------------------------
     3px adalah standar `.brutal-border` dari spesifikasi. Hierarki TIDAK
     dibuat dengan menebalkan border (semua kotak penting sama tebal), tapi
     dengan kedalaman bayangan di bawah. --bw-1 hanya untuk pemisah paling
     rapat, mis. baris tabel matrik 91 warga. */
  --bw-1: 2px;
  --bw-2: 3px;
  --bw-3: 3px;

  /* --- Bayangan keras -------------------------------------------------------
     Offset tanpa blur, tanpa opacity. Inilah tanda tangan tema ini.
     Tiga tingkat kedalaman = tiga tingkat kepentingan:

       --sh-1 (4px) → lencana, tombol kecil, kartu sekunder
       --sh-2 (6px) → tombol utama, kartu, panel
       --sh-3 (8px) → kartu saldo, modal, elemen hero

     Tiap tingkat punya pasangan "--press": nilai saat elemen ditekan. Aturan
     mainnya, elemen bergeser PERSIS sejauh selisih offsetnya, sehingga sudut
     kanan-bawah bayangan tidak pernah bergerak — ilusi menekan tombol fisik.
     Memakai var(--ink) supaya satu definisi cukup. */
  --sh-1:       4px 4px 0 var(--ink);
  --sh-1-press: 2px 2px 0 var(--ink);
  --sh-2:       6px 6px 0 var(--ink);
  --sh-2-press: 3px 3px 0 var(--ink);
  --sh-3:       8px 8px 0 var(--ink);
  --sh-3-press: 4px 4px 0 var(--ink);

  /* Bayangan berwarna — dipakai hemat, hanya di kolase hero dan kartu yang
     memang mewakili satu pos dana tertentu. */
  --sh-red:    8px 8px 0 var(--brutal-red);
  --sh-blue:   8px 8px 0 var(--brutal-blue);
  --sh-yellow: 8px 8px 0 var(--brutal-yellow);

  /* --- Gerak ----------------------------------------------------------------
     0.1s ease untuk interaksi tekan, persis seperti spesifikasi: brutalism
     tidak "mengalun", ia menjepret. Durasi lebih panjang hanya untuk reveal
     saat gulir dan marquee. */
  --t-press: 100ms;
  --t-fast:  120ms;
  --t-base:  180ms;
  --t-slow:  300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --ease-mid: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-step: cubic-bezier(0.2, 0, 0, 1);   /* tegas, nyaris tanpa ekor */

  /* Reveal saat gulir tetap memakai overshoot: kartu jatuh, melewati sedikit
     posisi akhirnya, lalu "klik" masuk ke tempat. Cocok dengan bahasa yang
     tegas — bukan pudar lembut. */
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);

  --marquee-speed: 26s;

  /* --- Lapisan --------------------------------------------------------------- */
  --z-bg:      0;
  --z-base:    1;
  --z-sticky:  20;
  --z-header:  40;
  --z-overlay: 60;
  --z-toast:   80;

  --touch: 48px;   /* dinaikkan dari 44px — tombol brutalist memang besar */

  /* Mode gelap otomatis tetap DIMATIKAN (CP-20). Tema BRUTAL adalah tema
     terang dengan tinta hitam; membalikkannya akan menghilangkan kontras
     border-hitam-di-atas-putih yang jadi seluruh identitasnya. */
  color-scheme: light;
}