/* =========================================================
   TOKEN DESAIN
   Semua warna, font, radius, dan spasi dikumpulkan di sini.
   Mau ganti warna aksen? Cukup ubah --primary-* di bawah.
   Referensi: apple-DESIGN.md
   ========================================================= */

@font-face {
  font-family: "Inter";
  src: url("../lib/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* ---------- Warna: mode terang ---------- */
  --bg: #f5f5f7;              /* parchment, latar halaman */
  --surface: #ffffff;         /* card, sheet */
  --surface-raised: #ffffff;  /* thumb segmented control */
  --chip: #e8e8ed;            /* track segmented, tombol ikon */
  --ink: #1d1d1f;             /* teks utama */
  --ink-muted: #6e6e73;       /* teks sekunder (lolos kontras AA) */
  --hairline: #e0e0e0;        /* garis tipis */
  --primary-text: #0066cc;    /* Action Blue untuk teks & ikon */
  --primary-fill: #0066cc;    /* Action Blue untuk latar tombol */
  --on-primary: #ffffff;
  --focus: #0071e3;
  --danger-text: #c4001a;
  --danger-fill: #d70015;
  --nav-bg: rgba(245, 245, 247, 0.8);
  --scrim: rgba(0, 0, 0, 0.32);
  --chart-grid: rgba(0, 0, 0, 0.06);

  /* ---------- Tipografi ---------- */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-title: 34px;      /* judul halaman */
  --fs-amount: 44px;     /* angka jumlah di halaman Catat */
  --fs-stat: 40px;       /* angka rata-rata di Statistik */
  --fs-tagline: 21px;
  --fs-body: 17px;
  --fs-caption: 14px;
  --fs-fine: 12px;
  --track-display: -0.02em;
  --track-body: -0.022em;

  /* ---------- Radius (aturan tetap) ----------
     pill  : tombol, toggle, pemilih bulan
     input : field isian
     card  : card & bottom sheet               */
  --r-pill: 9999px;
  --r-input: 11px;
  --r-card: 18px;

  /* ---------- Spasi (basis 8px) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  --nav-h: 64px;
  --page-max: 560px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Warna: mode gelap (otomatis ikut setting HP) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161617;
    --surface: #242426;
    --surface-raised: #48484a;
    --chip: #333336;
    --ink: #f5f5f7;
    --ink-muted: #a1a1a6;
    --hairline: #3a3a3c;
    --primary-text: #2997ff;
    --primary-fill: #0071e3;
    --focus: #2997ff;
    --danger-text: #ff6961;
    --danger-fill: #d70015;
    --nav-bg: rgba(22, 22, 23, 0.8);
    --scrim: rgba(0, 0, 0, 0.55);
    --chart-grid: rgba(255, 255, 255, 0.08);
  }
}