/* JawaraPajak UI v1.4 (dikunci 7 Okt 2026): token. Sumber: 01-brand/jawarapajak-ui/tokens.json
   Jangan ubah nilai di sini tanpa persetujuan owner; ubah di brand kit dulu, lalu salin ke sini. */
:root {
  /* ---------- Warna (nama brand kit) ---------- */
  --bg-page: #f7f7f5;
  --bg-card: #ffffff;
  --bg-mutiara: #fbfaf7;
  --bg-subtle: #f1f0ec;
  --line: #e7e5e0;
  --control-border: #8f8b84;
  --ink: #1a1a1a;
  --ink-muted: #57534e;
  --ink-subtle: #77736c;
  --on-dark: #ffffff;
  --brand: #b3201b;
  --brand-hover: #8e1915;
  --brand-soft: #fbe4e3;
  --accent: #ffc83d;
  --accent-soft: #fff1cc;
  --wa: #12863f;
  --wa-hover: #0e6e33;
  --ok-bg: #e6f4ea;     --ok-fg: #146c3a;
  --warn-bg: #fff4d6;   --warn-fg: #7a5200;
  --danger-bg: #fce8e7; --danger-fg: #9b1c17;
  --info-bg: #e7f0fd;   --info-fg: #1f4e9c;
  --neutral-bg: var(--bg-subtle); --neutral-fg: var(--ink-muted);
  --focus: var(--brand);
  /* Warna kategori pajak (v1.3): latar -bg, ikon/teks -fg */
  --kat-semua-bg: #1a1a1a; --kat-semua-fg: #ffffff;
  --kat-kendaraan-bg: #fbe4e3; --kat-kendaraan-fg: #b3201b;
  --kat-pbb-bg: #fff1cc; --kat-pbb-fg: #8a5a00;
  --kat-bphtb-bg: #e3eefc; --kat-bphtb-fg: #1f4e9c;
  --kat-pbjt-bg: #fde8d7; --kat-pbjt-fg: #a0440c;
  --kat-reklame-bg: #eee8fb; --kat-reklame-fg: #5b37a6;
  --kat-airtanah-bg: #ddf2f0; --kat-airtanah-fg: #0b6a64;
  --kat-lain-bg: #e8ecf0; --kat-lain-fg: #3b4856;

  /* ---------- Huruf ---------- */
  --font-display: "Anybody", system-ui, sans-serif;
  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;

  /* ---------- Spasi, sudut, bayangan, ukuran ---------- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(26, 26, 26, 0.06);
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.06), 0 4px 10px rgba(26, 26, 26, 0.05);
  --shadow-seg: 0 1px 2px rgba(26, 26, 26, 0.14);
  --shadow-md: 0 8px 24px rgba(26, 26, 26, 0.12);
  --control-h: 44px; --control-h-sm: 36px;
  --icon-sm: 18px; --icon-md: 22px; --icon-lg: 26px;

  /* ---------- Nama lama yang masih dipakai styles.css / peraturan.css ---------- */
  --merah: var(--brand);
  --merah-tua: var(--brand-hover);
  --kuning: var(--accent);
  --hitam: var(--ink);
  --abu: var(--ink-muted);
  --putih: var(--bg-card);
  --mutiara: var(--bg-mutiara);
  --mutiara-2: var(--bg-subtle);
  --bg: var(--bg-page);
  --surface: var(--bg-card);
  --surface-2: var(--bg-subtle);
  --text: var(--ink);
  --muted: var(--ink-muted);
  --on-brand: var(--on-dark);
  --on-accent: var(--ink);
  --link: var(--brand);
  --font: var(--font-sans);
  --fw-body: 400;
  --fw-strong: 700;
  --fw-display: 800;
  --tracking-display: -0.03em;
  --fs-small: 0.875rem;
  --r-sm: var(--radius-md);
  --r-md: var(--radius-lg);
  --r-lg: var(--radius-xl);
  --r-pill: var(--radius-pill);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px;

  color-scheme: light;
}