/* ============================================================
   Zennit — design tokens (satu-satunya sumber nilai desain)
   Dimuat di partials/head.blade.php, sebelum CSS lain.
   Aturan pemakaian: lihat DESIGN.md di root repo.
   ============================================================ */

:root {
  /* ─── WARNA ─────────────────────────────────────────── */
  --green-900: #0d2e1f;
  --green-800: #14442e;
  --green-700: #1a5c3a;
  --green-600: #206e46;
  --green-500: #2a8c5a;
  --green-400: #3daa72;
  --green-100: #e6f4ec;
  --green-50:  #f0faf5;
  --gold:      #f5a623;
  --gold-soft: #fff3da;
  --white:     #ffffff;
  --gray-100:  #f5f7f5;
  --gray-200:  #e8ece9;
  --gray-400:  #9fb3a8;
  --gray-500:  #6b8577;
  --gray-700:  #2e4a38;
  --text:      #0f2d1f;

  /* ─── FONT ──────────────────────────────────────────── */
  /* Montserrat: judul, tombol, label/badge, angka. Berat 600/700.
     Poppins:    teks isi, form, navigasi.          Berat 400/500/600. */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body:    'Poppins', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ─── UKURAN TEKS (statis) ──────────────────────────── */
  --fs-2xs:  .6875rem;  /* 11px  label mikro, badge kecil, catatan kaki */
  --fs-xs:   .75rem;    /* 12px  eyebrow/caps, badge, meta */
  --fs-sm:   .8125rem;  /* 13px  teks sekunder, helper form, tombol kecil */
  --fs-md:   .875rem;   /* 14px  teks UI: tombol, input, nav, isi kartu */
  --fs-base: .9375rem;  /* 15px  paragraf isi standar */
  --fs-lg:   1rem;      /* 16px  paragraf lead, judul kartu kecil */
  --fs-xl:   1.125rem;  /* 18px  judul kartu */
  --fs-2xl:  1.25rem;   /* 20px  judul blok kecil */
  --fs-3xl:  1.5rem;    /* 24px  angka statistik kecil, judul modal */
  --fs-4xl:  1.75rem;   /* 28px  angka statistik, harga */
  --fs-5xl:  2rem;      /* 32px  angka besar */
  --fs-6xl:  2.5rem;    /* 40px  angka hero/statistik, inisial avatar */

  /* ─── UKURAN JUDUL (fluid) ──────────────────────────── */
  --fs-display: clamp(2.6rem, 4vw, 4rem);       /* hero halaman utama saja */
  --fs-h1:      clamp(2.1rem, 4vw, 3.25rem);    /* judul hero tiap halaman */
  --fs-h2:      clamp(1.75rem, 3.2vw, 2.5rem);  /* judul section */
  --fs-h3:      clamp(1.5rem, 2.6vw, 2rem);     /* sub-section, CTA */
  --fs-h4:      clamp(1.25rem, 2.2vw, 1.75rem); /* judul blok/kartu besar */

  /* ─── TINGGI BARIS ──────────────────────────────────── */
  --lh-none:    1;     /* ikon, badge, angka besar */
  --lh-tight:   1.15;  /* judul h1–h2 */
  --lh-snug:    1.3;   /* judul h3–h4, judul kartu */
  --lh-normal:  1.6;   /* teks UI & paragraf pendek */
  --lh-relaxed: 1.75;  /* artikel/paragraf panjang */

  /* ─── JARAK HURUF ───────────────────────────────────── */
  --ls-tight: -.02em;  /* judul besar */
  --ls-wide:  .04em;   /* label kecil */
  --ls-caps:  .1em;    /* teks UPPERCASE (eyebrow, badge) */

  /* ─── SPACING (kelipatan 4px) ─────────────────────────
     Untuk padding, margin, gap. Angka di nama = kelipatan 4 (sp-4 = 16px). */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;
  --nav-h: 68px;  /* tinggi navbar fixed */

  /* ─── RADIUS & BAYANGAN ─────────────────────────────── */
  --radius-sm:  10px;
  --radius-md:  18px;
  --radius-lg:  28px;
  --radius-xl:  40px;

  --shadow-sm: 0 2px 12px rgba(15,45,31,.07);
  --shadow-md: 0 8px 32px rgba(15,45,31,.12);
  --shadow-lg: 0 20px 60px rgba(15,45,31,.18);
}

/* Bawaan browser untuk <strong>/<b>/<h1–h6> adalah 700+, yang tidak dimuat untuk Poppins
   (jadi tebal palsu). Samakan ke skala; class tetap boleh menimpa. */
strong, b { font-weight: 600; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; }