/* tokens.css — diekstrak dari design/*.svg (12 layar, viewBox 0 0 390 844) */
:root {
  /* hijau */
  --deep:      #0B3D2E;
  --deep-2:    #12604A;
  --emerald:   #12715A;
  --mint:      #34D399;

  /* aksen */
  --gold:      #F0CB84;
  --gold-d:    #D9A44C;
  --amber:     #C08A2E;
  --danger:    #B04A3E;

  /* netral */
  --cream:     #F6F7F3;
  --surface:   #FFFFFF;
  --surface-2: #F1F4F2;
  --surface-3: #EEF2EF;
  --line:      #E6EAE7;
  --track:     #E8EDE9;
  --ink:       #0F1F1A;
  --ink-2:     #3C4B44;
  --emerald-2: #0E6B4F;
  --muted:     #7B8A83;
  --muted-2:   #8C9A93;
  --muted-3:   #9AA8A1;
  --muted-4:   #A8B4AE;

  /* hijau lembut */
  --mint-soft:  #EAF7F1;
  --mint-soft-2:#DDF3E9;
  --gold-soft:  #FDF3DE;

  /* dekoratif di atas gelap */
  --on-dark:   #8FE3C2;
  --on-dark-2: #7FE0BC;
  --on-dark-3: #9FC7B7;
  --on-dark-4: #A7E8C9;

  /* bentuk */
  --r-card: 22px;
  --r-row:  15px;
  --r-chip: 12px;
  --r-btn:  17px;
  --r-pill: 999px;

  /* jarak */
  --gutter: 20px;
  --w-content: 350px;

  /* bayangan */
  --shadow-card: 0 4px 16px rgba(11, 61, 46, .06);
  --shadow-deep: 0 10px 24px rgba(4, 20, 15, .35);
  --shadow-fab:  0 10px 22px rgba(11, 61, 46, .28);

  /* tipografi — skala aksesibel, basis 17px
     Nama token lama dipertahankan agar komponen tidak perlu diubah semua,
     tetapi nilainya dinaikkan agar nyaman dibaca di layar HP.
     Catatan: nama token = nama lama, BUKAN ukuran px. Urutan tetap menaik. */
  --fs-10: 14px;   /* meta kecil / badge / label nav */
  --fs-11: 15px;   /* label kecil */
  --fs-12: 16px;   /* body sekunder */
  --fs-13: 17px;   /* body padat */
  --fs-14: 18px;   /* body utama */
  --fs-16: 18px;   /* input, select, tombol, label field */
  --fs-17: 20px;   /* judul kartu */
  --fs-18: 21px;   /* sub-judul */
  --fs-22: 27px;   /* judul besar */
  --fs-24: 27px;   /* judul halaman / sheet */
  --fs-28: 31px;   /* angka statistik */
  --fs-36: 37px;   /* hero */
  --lh-body: 1.55;
  --lh-tight: 1.2;

  /* tambahan untuk SPA v2 */
  --bg:          #F8F9FA;
  --danger-soft: #FCEDEA;
  --danger-line: #F2C9C2;
  --amber-ink:   #B07C1E;
  --surface-4:   #F5F7F5;
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, .04);
  --shadow-card-2: 0 8px 24px rgba(11, 61, 46, .07);
  --r-18: 18px;
  --r-16: 16px;
  --r-12: 12px;
}