/* iklanberjalan — design tokens (dari brand guideline) */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700..800&family=Plus+Jakarta+Sans:wght@400;700&display=swap");

:root {
  /* Warna */
  --brand-oranye: #FF5A1F;  /* utama; teks di atasnya: aspal */
  --oranye-teks:  #B33A0C;  /* oranye untuk teks/link */
  --aksen-kuning: #FFC93C;  /* marka, badge */
  --pink-permen:  #FF9EC4;  /* aksen fun, maks 1 per layar, wajib outline aspal di atas kain */
  --aspal:        #17181C;  /* tinta utama, outline stiker */
  --abu-teks:     #5E6068;  /* teks sekunder, border kontrol */
  --kain:         #F7F3EC;  /* latar halaman */
  --putih:        #FFFFFF;  /* kartu */
  --garis:        #E4DDD1;  /* hairline dekoratif */
  --sukses:       #0E7A5C;
  --bahaya:       #B42318;

  /* Tipografi */
  --font-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;

  /* Spacing */
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-12: 48px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Gaya stiker */
  --border-stiker: 2px;
  --shadow-stiker: 4px 4px 0 #17181C;
  --shadow-stiker-tekan: 1px 1px 0 #17181C;
}

/* Gaya teks */
.display-xl { font: 800 64px/60px var(--font-display); letter-spacing: -0.02em; }
.heading-l  { font: 800 32px/36px var(--font-display); letter-spacing: -0.01em; }
.angka-stat { font: 700 28px/32px var(--font-display); }
.heading-m  { font: 700 20px/28px var(--font-body); }
.body       { font: 400 16px/24px var(--font-body); }
.body-s     { font: 400 14px/20px var(--font-body); }
.label      { font: 700 12px/16px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }

/* Contoh tombol utama gaya stiker */
.btn-stiker {
  min-height: 44px; padding: 0 18px;
  background: var(--brand-oranye); color: var(--aspal);
  border: var(--border-stiker) solid var(--aspal); border-radius: var(--radius-md);
  box-shadow: var(--shadow-stiker); font: 700 15px/1 var(--font-body);
  transition: transform .15s, box-shadow .15s;
}
.btn-stiker:active { transform: translate(3px, 3px); box-shadow: var(--shadow-stiker-tekan); }
@media (prefers-reduced-motion: reduce) { .btn-stiker { transition: none; } }