/* ==========================================================================
   YAMB — Design Tokens
   Semua nilai warna, tipografi, jarak, radius, dan bayangan diambil dari
   gambar desain referensi. Ubah di sini agar seluruh situs ikut berubah.
   ========================================================================== */
/* Font: Plus Jakarta Sans (SIL Open Font License, lihat assets/fonts/OFL.txt) — di-host sendiri */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand colors ---- */
  --c-navy-950: #022647;   /* footer */
  --c-navy-900: #042e55;   /* judul, filter aktif */
  --c-navy-800: #0e3a66;
  --c-navy-600: #2a5282;
  --c-green-700: #086a38;  /* hover tombol */
  --c-green-600: #0a7a41;  /* tombol utama, garis aksen */
  --c-green-500: #12924c;  /* teks aksen judul */
  --c-green-400: #36a55a;  /* progress bar */
  --c-green-100: #dcefe4;
  --c-green-50:  #ecf6f3;  /* panel kalkulator zakat */
  --c-gold-600:  #b07f2e;
  --c-gold-500:  #c4923c;  /* tombol Donasi di header/footer */
  --c-gold-300:  #e8b04a;  /* teks emas di hero mobile */

  /* ---- Neutrals ---- */
  --c-text: #1d2b3a;
  --c-text-muted: #56677a;
  --c-text-soft: #7a8a9b;
  --c-border: #e3e9f0;
  --c-border-strong: #cfd9e4;
  --c-bg: #ffffff;
  --c-bg-soft: #f5f8fb;
  --c-bg-hero: #ecf5fd;
  --c-bg-panel: #f1f6fa;
  --c-bg-pill: #e8eff6;
  --c-bg-copy: #dee8ed;
  --c-track: #edf1f4;

  /* ---- Tag / kategori ---- */
  --tag-green-bg: #6ef07a;  --tag-green-fg: #0b3b1a;
  --tag-blue-bg:  #0377ce;  --tag-blue-fg:  #ffffff;
  --tag-gold-bg:  #fbc961;  --tag-gold-fg:  #3b2a00;

  /* ---- Social ---- */
  --c-whatsapp: #25a244;
  --c-facebook: #1877f2;
  --c-youtube: #ff0033;
  --c-tiktok: #111111;
  --c-web: #16809a;

  /* ---- Typography ---- */
  --font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --fs-xs: 0.6875rem;   /* 11 */
  --fs-sm: 0.8125rem;   /* 13 */
  --fs-base: 0.9375rem; /* 15 */
  --fs-md: 1rem;        /* 16 */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.375rem;    /* 22 */
  --fs-2xl: 1.625rem;   /* 26 */
  --fs-3xl: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  --fs-hero: clamp(1.875rem, 1.1rem + 2.4vw, 2.75rem);
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.55;

  /* ---- Spacing (4px scale) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --s-14: 56px; --s-16: 64px;

  /* ---- Layout ---- */
  --container: 1428px;
  --gutter: clamp(16px, 3.8vw, 58px);
  --header-h: 60px;
  --bottom-nav-h: 68px;

  /* ---- Radius ---- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 26px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --sh-xs: 0 1px 2px rgba(10, 38, 71, .06);
  --sh-card: 0 2px 10px rgba(10, 38, 71, .07);
  --sh-float: 0 10px 30px rgba(10, 38, 71, .12);
  --sh-fab: 0 8px 20px rgba(10, 122, 65, .35);

  /* ---- Components ---- */
  --btn-h: 44px;
  --btn-h-sm: 36px;
  --focus-ring: 0 0 0 3px rgba(18, 146, 76, .35);
  --t-fast: .18s ease;
}

@media (min-width: 992px) {
  :root { --header-h: 58px; }
}