/*
  HAPAKAT design tokens, versi 1.0 (31 Oktober 2026)
  Turunan sistem desain x.ai milik tim (tokens.json v1) dengan biru Bank Indonesia sebagai aksen.
  Ini satu-satunya berkas yang memuat nilai warna dan ukuran mentah.
  components.css dan site.css hanya memakai var(--…).

  Format: satu token per baris, komentar di ujung baris = tujuan pemakaian.
  Tabel "Referensi token" di /design-system/ dibuat otomatis dari berkas ini.

  Breakpoint (custom property tidak bisa dipakai di dalam @media, jadi dicatat di sini):
    sm   480px   ponsel besar
    md   768px   tablet; gutter halaman 24px, judul display penuh
    lg  1024px   dokumen dua kolom, daftar isi menempel di kiri
    xl  1280px   lebar desain dashboard pemda
*/

:root {
  /* ===== Permukaan (x.ai) ===== */
  --surface: #ffffff; /* Latar halaman dan layar aplikasi. Semuanya berdiri di atas putih polos. */
  --surface-nav: #ffffffd9; /* Header lengket 64px, selalu dipakai bersama --blur-nav. */
  --surface-card: #f9f8f6; /* Putih hangat untuk kartu, tile ikon, kartu limit, dan KPI. */
  --surface-button: #f2f1ef; /* Isi tombol sekunder dan chip filter yang tidak dipilih. */

  /* ===== Tinta (x.ai) ===== */
  --ink: #0a0a0a; /* Semua teks utama dan isi tombol primer. */
  --ink-60: #0a0a0a99; /* Eyebrow, keterangan, label sekunder, placeholder. Teks terkecil yang masih lolos AA. */
  --ink-55: #0a0a0a8c; /* Paragraf pelan dari x.ai. Sedikit di bawah AA; HAPAKAT memakai --ink-60 untuk teks penting. */
  --ink-45: #0a0a0a73; /* Garis kontrol formulir dan cincin langkah berikutnya di linimasa (lolos 3:1), teks nonaktif. Bukan untuk teks biasa. */
  --ink-30: #0a0a0a4d; /* Dekoratif saja: batang grafik "lainnya", sub-label yang maknanya sudah ada di nilai. */
  --ink-25: #0a0a0a40; /* Dekoratif: titik tengah pemisah. */
  --ink-20: #0a0a0a33; /* Dekoratif: pemisah di pil pengumuman, garis putus-putus area foto kosong. */
  --ink-10: #0a0a0a1a; /* Garis rambut kartu, pemisah baris, dan garis antar-bagian. */
  --ink-08: #0a0a0a14; /* Garis pil pengumuman; lapisan saat ditekan. */
  --ink-06: #0a0a0a0f; /* Garis rambut halus, isi skeleton, dan lintasan grafik. */
  --ink-04: #0a0a0a0a; /* Lapisan hover dan chip panah di pil pengumuman. */
  --ink-muted: #7d8187; /* Label tab tidak aktif di x.ai. HAPAKAT memakai --ink-60 karena nilai ini di bawah AA. */
  --border-popover: #d5d9e2; /* Garis 1px panel melayang. */

  /* ===== Di atas tinta (x.ai) ===== */
  --on-ink: #ffffff; /* Teks di atas isi --ink, misalnya tombol primer. */
  --on-ink-80: #ffffffcc; /* Judul pada tile gelap. */
  --on-ink-55: #ffffff8c; /* Teks sekunder pada tile gelap; detail chip kartu KKI mini. */
  --on-ink-20: #ffffff33; /* Garis pemisah di dalam tombol gelap. */

  /* ===== Aksen x.ai yang dibuang =====
     accent #ff6308, accent-tint #ff63081a, dan ember-700, ember-500, ember-400, ember-300, ember-100
     tidak dipakai di HAPAKAT: oranye dan gradien ember diganti biru Bank Indonesia.
     Nama --accent dan --accent-tint tetap ada di bagian Alias semantik, kini menunjuk ke biru BI. */

  /* ===== Biru Bank Indonesia ===== */
  --bi-blue: #055498; /* Biru dominan bi.go.id, rgb(5, 84, 152), juga isi ikon SVG situsnya. Diambil 31 Oktober 2026. */
  --bi-blue-bright: #106ebe; /* Biru terang bi.go.id, rgb(16, 110, 190). Seri grafik dan sorotan data kecil. */
  --bi-navy: #163a65; /* Biru gelap bi.go.id, rgb(22, 58, 101). Hover tautan dan seri grafik pertama. */
  --bi-blue-light: #9dc1e6; /* Turunan HAPAKAT, bukan dari bi.go.id. Seri grafik ketiga; dekoratif, bukan untuk teks. */
  --bi-blue-tint: #05549814; /* --bi-blue 8%. Latar status terpilih, badge biru, KPI unggulan, dan callout info. */
  --on-blue: #ffffff; /* Teks dan ikon di atas isi --bi-blue. */

  /* ===== Status (hue status situs x.ai, digelapkan agar lolos AA) ===== */
  --success-fg: #1d723c; /* hsl(142 60% 28%) dari hsl(142 71% 45%). Teks, ikon, dan cakram status sukses. */
  --success-bg: #ecf9f1; /* hsl(142 50% 95%). Latar badge dan alert sukses. */
  --warning-fg: #7a631f; /* hsl(45 60% 30%) dari hsl(45 93% 47%). Teks status menunggu atau diproses. */
  --warning-bg: #fdf8e7; /* hsl(45 85% 95%). Latar badge dan alert peringatan. */
  --danger-fg: #b62020; /* hsl(0 70% 42%) dari hsl(0 84% 60%). Galat, ditolak, perlu revisi. */
  --danger-bg: #fceeee; /* hsl(0 70% 96%). Latar badge dan alert galat. */
  --info-fg: var(--bi-blue); /* Teks dan ikon informasi. */
  --info-bg: var(--bi-blue-tint); /* Latar alert dan callout informasi. */

  /* ===== Alias semantik ===== */
  --accent: var(--bi-blue); /* Aksen tunggal HAPAKAT: biru BI menggantikan oranye x.ai. */
  --accent-tint: var(--bi-blue-tint); /* Latar badge aksen, pengganti tint oranye x.ai. */
  --link: var(--bi-blue); /* Warna tautan teks. */
  --link-hover: var(--bi-navy); /* Tautan saat hover. */
  --focus: var(--bi-blue); /* Cincin fokus 2px di semua elemen interaktif. */
  --selected: var(--bi-blue); /* Isi atau garis elemen terpilih: chip, baris dokumen, menu aktif. */
  --selected-tint: var(--bi-blue-tint); /* Latar lembut elemen terpilih. */
  --on-selected: var(--on-blue); /* Teks di atas --selected. */
  --border-hairline: var(--ink-10); /* Garis rambut kartu dan pemisah. */
  --border-control: var(--ink-45); /* Garis input, pencarian, dan kotak centang. Lolos 3:1 untuk batas kontrol. */
  --disabled-bg: var(--ink-06); /* Isi tombol nonaktif. */
  --disabled-fg: var(--ink-45); /* Label tombol nonaktif. Pengecualian kontras WCAG untuk kontrol nonaktif. */
  --state-hover: var(--ink-04); /* Lapisan hover di atas isi terang. */
  --state-press: var(--ink-08); /* Lapisan saat ditekan di atas isi terang. */
  --state-hover-dark: #ffffff1f; /* Lapisan hover 12% putih di atas isi tinta atau biru. Tambahan HAPAKAT. */

  /* ===== Grafik ===== */
  --chart-1: var(--bi-navy); /* Seri pertama: Konsumsi. */
  --chart-2: var(--bi-blue-bright); /* Seri kedua: ATK. */
  --chart-3: var(--bi-blue-light); /* Seri ketiga: Percetakan. */
  --chart-other: var(--ink-30); /* Seri "lainnya" dan batang kabupaten lain. */
  --chart-bar: var(--bi-blue); /* Batang tunggal, misalnya belanja per kabupaten/kota. */
  --chart-track: var(--ink-06); /* Lintasan batang dan meter. */

  /* ===== Panel demo gelap (x.ai) ===== */
  --term-bg: #151515; /* Latar terminal dan ilustrasi foto. Gelap hanya di dalam panel demo. */
  --term-chip: #111110; /* Gelembung chat gelap. */
  --term-ink: #e1e1e1; /* Teks kode di atas --term-bg. */
  --term-cream: #f2ede5; /* Teks prompt dan label tebal di terminal. */
  --term-muted: #8d867e; /* Teks status terminal. */
  --term-dim: #59534d; /* Teks tersier terminal. Dekoratif. */
  --term-rule: #2a2825; /* Pemisah pipa di status bar terminal. */
  --term-lineno: #6c6c6c; /* Nomor baris diff yang tidak berubah. */
  --term-add: #9ece6a; /* Nomor baris tambahan di diff. */
  --term-add-bg: #202a16; /* Latar baris tambahan. */
  --term-del: #f7768e; /* Nomor baris yang dihapus. */
  --term-del-bg: #32181c; /* Latar baris yang dihapus. */
  --term-path: #91c17a; /* Path berkas dan penanda selesai. */
  --term-violet: #bc97ff; /* Glif agen dan titik berpikir. */
  --term-blue: #93adff; /* Caret prompt. */
  --term-cyan: #29c6be; /* Nama pemanggilan alat. */
  --window-red: #ff5f57; /* Titik kontrol jendela. */
  --window-yellow: #febc2e; /* Titik kontrol jendela. */
  --window-green: #28c840; /* Titik kontrol jendela. */

  /* ===== Kode terang (x.ai) ===== */
  --code-ink: #24292e; /* Teks biasa di blok kode terang. */
  --code-keyword: #d73a49; /* Kata kunci dan operator. */
  --code-string: #032f62; /* Literal string. */
  --code-param: #e36209; /* Nama argumen. Nilai asli x.ai, di bawah AA. */
  --code-builtin: #005cc5; /* Fungsi bawaan. */

  /* ===== Keluarga huruf ===== */
  --font-sans: "Geist", system-ui, sans-serif; /* Satu keluarga sans untuk semua teks. */
  --font-mono: "Geist Mono", ui-monospace, monospace; /* Kode, nomor pesanan, kode rekening, label teknis kecil. */
  --weight-regular: 400; /* Judul display dan teks. */
  --weight-medium: 500; /* Judul, label, tombol, angka. Judul tidak pernah tebal. */
  --weight-semibold: 600; /* Wordmark, label menu aktif, dan teks strong di dokumen. Judul tidak pernah semibold. */

  /* ===== Skala tipe (x.ai, format: weight size/line-height family) ===== */
  --text-display: 400 60px/60px var(--font-sans); /* Judul hero, satu per halaman. */
  --tracking-display: -0.6px; /* Tracking -1% untuk display. */
  --text-display-sm: 400 40px/44px var(--font-sans); /* Tambahan HAPAKAT: judul hero di layar di bawah 768px. */
  --tracking-display-sm: -0.4px; /* Tracking -1% untuk display-sm. */
  --text-stat: 500 48px/48px var(--font-sans); /* Angka statistik besar. */
  --tracking-stat: -0.48px; /* Tracking -1% untuk stat. */
  --text-heading-1: 500 30px/36px var(--font-sans); /* Judul bagian; angka kunci seperti sisa limit dan nilai KPI. */
  --tracking-heading-1: -0.3px; /* Tracking -1% untuk heading-1. */
  --text-heading-2: 500 24px/32px var(--font-sans); /* Subjudul bagian, judul layar hasil. */
  --tracking-heading-2: -0.24px; /* Tracking -1% untuk heading-2. */
  --text-lead: 400 18px/29px var(--font-sans); /* Paragraf pembuka di bawah judul. */
  --text-body-lg: 400 16px/26px var(--font-sans); /* Teks dokumen panjang (PRD, design system). */
  --text-body: 400 16px/24px var(--font-sans); /* Teks dasar aplikasi dan kartu. */
  --text-title-sm: 500 16px/22px var(--font-sans); /* Nama produk, judul kartu, nominal di daftar. */
  --tracking-title-sm: -0.16px; /* Tracking -1% untuk title-sm. */
  --text-label: 500 14px/20px var(--font-sans); /* Tombol, tab, chip, label field, nilai di daftar keterangan. */
  --text-body-sm: 400 14px/20px var(--font-sans); /* Teks sekunder, isi tabel, nama UMKM. */
  --tracking-body-sm: -0.15px; /* Tracking body-sm dari x.ai. */
  --text-nav: 500 13px/20px var(--font-sans); /* Tautan navigasi situs, inisial avatar. */
  --text-link-sm: 400 13px/21px var(--font-sans); /* Footer, petunjuk field. */
  --text-caption: 400 12px/16px var(--font-sans); /* Waktu, sumber dokumen, teks bantu di bawah tombol. */
  --text-badge: 500 11px/11px var(--font-sans); /* Badge kecil. */
  --text-micro: 500 10px/15px var(--font-sans); /* Baris legal. */
  --text-code: 400 13px/24px var(--font-mono); /* Blok kode terang. */
  --text-code-sm: 400 12px/19px var(--font-mono); /* Kode kecil, kode rekening di tabel. */
  --tracking-code-sm: -0.12px; /* Tracking code-sm. */
  --text-term: 400 11px/18px var(--font-mono); /* Teks terminal. */
  --tracking-term: -0.11px; /* Tracking term. */
  --text-wordmark: 600 18px/20px var(--font-sans); /* Tambahan HAPAKAT: wordmark di header. */
  --text-wordmark-lg: 600 48px/48px var(--font-sans); /* Tambahan HAPAKAT: wordmark besar di halaman merek. */
  --tracking-wordmark: 0.04em; /* Wordmark kapital diberi jarak sedikit lebih longgar. */
  --font-size-code-inline: 0.875em; /* Kode sebaris di dalam paragraf, relatif terhadap teks di sekitarnya. */

  /* ===== Spasi (x.ai, kelipatan 4px) ===== */
  --space-0-5: 2px; /* Tambahan HAPAKAT: jarak rapat label dan nilai. */
  --space-1: 4px; /* Jarak ikon ke label, tumpukan rapat. */
  --space-1-5: 6px; /* Setara space-1.5 x.ai: baris meta, celah kecil. */
  --space-2: 8px; /* Celah antar-chip dan antar-tombol rapat. */
  --space-3: 12px; /* Celah antar-tombol hero, padding kartu kecil. */
  --space-4: 16px; /* Padding kartu, gutter halaman di ponsel. */
  --space-5: 20px; /* Gutter layar aplikasi 390px, padding kartu besar. */
  --space-6: 24px; /* Gutter halaman mulai 768px. */
  --space-8: 32px; /* Jarak pil pengumuman ke judul. */
  --space-10: 40px; /* Celah antar-kolom grid besar. */
  --space-12: 48px; /* Tambahan HAPAKAT: jarak antar-bagian dokumen di ponsel. */
  --space-16: 64px; /* Jarak antar-bagian dokumen. */
  --space-20: 80px; /* Jarak blok hero. */
  --space-24: 96px; /* Padding vertikal bagian beranda. */

  /* ===== Radius (x.ai) ===== */
  --radius-xs: 3px; /* Batang grafik, swatch legenda. */
  --radius-sm: 8px; /* Thumbnail, skeleton, tile kecil. */
  --radius-md: 12px; /* Tile ikon, area foto, baris dokumen, blok kode. */
  --radius-lg: 16px; /* Kartu, panel, spesimen. */
  --radius-tail: 6px; /* Satu sudut rapat gelembung chat; sudut kartu KKI mini. */
  --radius-pill: 9999px; /* Semua kontrol interaktif: tombol, chip, input, tab, badge. */
  --radius-device: 44px; /* Tambahan HAPAKAT: bingkai ponsel di halaman dokumentasi. */

  /* ===== Bayangan dan blur (x.ai, hanya untuk elemen melayang) ===== */
  --shadow-window: 0px 0px 1px #0000000f, 0px 18px 16px #0f172a2e; /* Jendela kode melayang. */
  --shadow-popover: 0px 10px 12px #0000001a, 0px 4px 2px #0000001a; /* Panel melayang seperti banner atau menu. */
  --blur-nav: 6px; /* backdrop-filter header lengket. */
  --blur-pill: 2px; /* backdrop-filter pil pengumuman. */

  /* ===== Kartu KKI (HAPAKAT) ===== */
  --kki-deep: #0b2a4d; /* Tepi gelap kilau kartu KKI, turunan --bi-navy. Dekoratif, tidak untuk teks. */
  --kki-sheen: radial-gradient(120% 140% at 85% 20%, var(--bi-blue-bright) 0%, var(--bi-blue) 45%, var(--kki-deep) 100%); /* Latar biru berkilau kartu KKI dan kotak limit. */
  --kki-band: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 214'><defs><pattern id='m' width='26' height='26' patternUnits='userSpaceOnUse'><g fill='none' stroke='%239dc1e6' stroke-opacity='.5'><path d='M13 1L25 13L13 25L1 13Z'/><path d='M13 6C17 10 17 16 13 20C9 16 9 10 13 6Z'/></g><g fill='%239dc1e6' fill-opacity='.5'><circle cx='13' cy='13' r='1.6'/><circle r='1.2'/><circle cx='26' r='1.2'/><circle cy='26' r='1.2'/><circle cx='26' cy='26' r='1.2'/></g></pattern></defs><path d='M0 0H132C80 52 168 124 108 214H0Z' fill='%23163a65'/><path d='M0 0H132C80 52 168 124 108 214H0Z' fill='url(%23m)'/><path d='M132 0C80 52 168 124 108 214' fill='none' stroke='%239dc1e6' stroke-opacity='.6' stroke-width='1.5'/></svg>"); /* Pita motif abstrak di sisi kartu. Warna di dalam SVG = --bi-navy dan --bi-blue-light. Calon pengganti: motif benang bintik. */
  --ratio-kki-band: 170 / 214; /* Rasio gambar pita motif. */
  --ratio-card: 1.586; /* Rasio kartu ISO/IEC 7810 ID-1, 85,60 × 53,98 mm. */
  --shadow-kki: 0px 8px 24px #0a0a0a29; /* Bayangan kartu KKI dan kotak limit, satu-satunya bayangan di layar aplikasi. */
  --kki-text-mark: 600 8.8cqw/1 var(--font-sans); /* "KKI" di wajah kartu, relatif terhadap lebar kartu. */
  --kki-text-small: 500 2.4cqw/1.3 var(--font-sans); /* Tulisan kecil di wajah kartu: Kartu Kredit Indonesia, nama bank, OPD. */
  --kki-text-name: 500 2.9cqw/1.3 var(--font-sans); /* Nama pemegang kartu. */
  --kki-text-number: 400 3.7cqw/1 var(--font-mono); /* Empat digit terakhir di wajah kartu. */
  --text-kki-mark: 600 18px/20px var(--font-sans); /* "KKI" di kotak limit. */

  /* ===== Garis dan fokus ===== */
  --border-width: 1px; /* Garis rambut. */
  --selected-width: 2px; /* Cincin dalam elemen terpilih. */
  --focus-width: 2px; /* Tebal cincin fokus. */
  --focus-offset: 2px; /* Jarak cincin fokus dari elemen. */

  /* ===== Ukuran kontrol dan komponen (HAPAKAT) ===== */
  --touch-min: 44px; /* Target sentuh minimum semua kontrol aplikasi dan tautan navigasi. */
  --size-cta: 52px; /* Tombol aksi utama di bar bawah layar tugas dan item navigasi bawah. */
  --size-btn-lg: 44px; /* Tombol lg x.ai. */
  --size-btn-md: 40px; /* Tombol md x.ai; area sentuh tetap 44px lewat pseudo-elemen. */
  --size-btn-nav: 36px; /* Tombol nav x.ai, tab. */
  --size-btn-sm: 28px; /* Tombol sm x.ai; area sentuh tetap 44px. */
  --size-control: 44px; /* Tinggi input, pencarian, dan select. */
  --size-badge: 17px; /* Badge kecil x.ai. */
  --size-badge-lg: 24px; /* Badge status di tabel dan header. */
  --size-chip-arrow: 24px; /* Chip panah bulat di pil pengumuman. */
  --size-avatar: 36px; /* Avatar inisial. */
  --size-marker: 24px; /* Penanda linimasa dan cakram status. */
  --size-tile-sm: 36px; /* Tile ikon kecil di baris dokumen. */
  --size-tile: 64px; /* Tile ikon kategori produk. */
  --size-disc: 64px; /* Cakram ikon header status. */
  --size-disc-lg: 80px; /* Cakram ikon layar hasil. */
  --size-row: 60px; /* Tinggi minimum baris dokumen SPJ. */
  --size-kki-thumb: 64px; /* Lebar gambar kartu KKI mini di layar bayar; tinggi mengikuti --ratio-card. */
  --size-qty-value: 80px; /* Lebar minimum nilai di pengatur jumlah. */
  --size-legend: 14px; /* Swatch legenda grafik. */
  --progress-height: 6px; /* Tinggi meter limit KKI. */
  --bar-height: 12px; /* Tinggi batang di daftar batang. */
  --share-height: 20px; /* Tinggi batang proporsi kategori. */
  --photo-height: 196px; /* Tinggi area foto serah terima. */
  --icon-xs: 14px; /* Ikon di badge dan status verifikasi. */
  --icon-sm: 16px; /* Ikon meta (waktu, lokasi) dan di tombol. */
  --icon-md: 20px; /* Ikon bawaan. */
  --icon-lg: 24px; /* Ikon navigasi dan tombol ikon. */
  --icon-tile: 28px; /* Ikon kategori di tile 64px. */
  --icon-xl: 32px; /* Ikon di cakram status. */
  --icon-stroke: 1.5; /* Tebal garis ikon pada grid 24, setara 1,25px di ukuran 20px. */
  --icon-stroke-sm: 1.75; /* Ikon 16px agar garis tetap terbaca. */
  --icon-stroke-bold: 2; /* Ikon 14px di badge, status, dan penanda linimasa. */

  /* ===== Tata letak ===== */
  --nav-height: 64px; /* Tinggi header situs. */
  --measure: 70ch; /* Lebar baca maksimum paragraf dokumen. */
  --measure-short: 36ch; /* Lebar teks pendek di layar hasil dan keadaan kosong. */
  --width-hero: 768px; /* Kolom hero dan judul bagian di beranda. */
  --width-content: 1117px; /* Lebar konten maksimum situs (x.ai). */
  --width-toc: 250px; /* Kolom daftar isi dokumen mulai 1024px. */
  --grid-min: 240px; /* Lebar minimum kartu di grid auto-fit situs. */
  --grid-min-kpi: 220px; /* Lebar minimum kartu KPI; empat kolom di 1280px. */
  --grid-min-meta: 140px; /* Lebar minimum kolom metadata dokumen. */
  --grid-min-swatch: 200px; /* Lebar minimum contoh warna di halaman design system. */
  --grid-min-do: 260px; /* Lebar minimum kolom Lakukan dan Hindari. */
  --width-app: 390px; /* Lebar desain layar aplikasi ponsel. */
  --height-app: 844px; /* Tinggi desain layar aplikasi ponsel. */
  --width-dashboard: 1280px; /* Lebar desain dashboard pemda. */
  --frame-bezel: 8px; /* Tebal bingkai ponsel di dokumentasi. */
  --table-min: 680px; /* Lebar minimum tabel transaksi sebelum menggulir sendiri. */
  --swatch-height: 72px; /* Tinggi contoh warna di halaman design system. */
  --z-header: 10; /* Lapisan header lengket. */
  --z-skip: 100; /* Lapisan tautan lewati navigasi. */

  /* ===== Gerak ===== */
  --duration-fast: 120ms; /* Hover dan tekan. */
  --duration-base: 200ms; /* Perubahan state seperti chip terpilih. */
  --duration-slow: 1200ms; /* Putaran spinner dan denyut skeleton. */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* Kurva bawaan semua transisi. */
}

/* Gerak dikurangi: transisi jadi instan, animasi berhenti (diatur di components.css). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}