/* ==========================================================================
   Avarith UMKM — tokens.css
   Semua CSS variable: warna, tipografi, spacing, radius, shadow, motion.
   Satu sumber kebenaran, pola sama seperti avarith-learn.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  /* --- Warna inti --- */
  --canvas:  #F3F3E0;                    /* BG halaman / krem */
  --page:    #F8F8EC;                    /* section terang */
  --card:    #FFFFFF;                    /* permukaan kartu */
  --ink:     #133E87;                    /* teks utama / navy */
  --muted:   #608BC1;                    /* teks sekunder */
  --accent:  #133E87;                    /* link, aksi, highlight */
  --fill:    #133E87;                    /* bg tombol primary */
  --fill-hi: #0D2C63;                    /* hover tombol primary */
  --surface: #CBDCEB;                    /* aksen kartu, bg kategori, hover */
  --surface-lo: #E1EAF4;                 /* aksen lebih tipis */
  --hair:    rgba(19, 62, 135, 0.08);    /* hairline border */
  --hair-2:  rgba(19, 62, 135, 0.16);    /* border input */

  --ok:   #34C759;
  --warn: #FF9500;
  --err:  #FF3B30;

  /* --- Shadow (satu keluarga, lembut) --- */
  --shadow:      0 1px 2px rgba(19, 62, 135, 0.05), 0 8px 24px rgba(19, 62, 135, 0.06);
  --shadow-card: 0 6px 20px rgba(19, 62, 135, 0.12);

  /* --- Radius --- */
  --r-card: 16px;
  --r-btn:  10px;
  --r-pill: 999px;

  /* --- Font --- */
  --font-head: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Type scale --- */
  --h1:    clamp(28px, 4.5vw, 42px);
  --h2:    clamp(22px, 3vw, 28px);
  --h3:    18px;
  --body:  15.5px;
  --lead:  17px;
  --small: 13px;
  --tiny:  12px;

  /* --- Layout --- */
  --container: 1160px;
  --nav-h: 64px;
  --aside-w: 232px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 220ms;
}