/* ==========================================================================
   Avarith Learn — tokens.css
   Semua CSS variable: warna, tipografi, spacing, radius, shadow, motion.
   Sumber tunggal (single source of truth). Authoritative dari build-spec.
   ========================================================================== */

/* Font: Fraunces (judul) + Inter (body) — dari Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

:root {
  /* --- Warna inti --- */
  --canvas: #EDF1D6;   /* BG luar / cream */
  --page:   #F3F6E7;   /* section terang */
  --card:   #FBFCF4;   /* permukaan kartu */
  --ink:    #3F513B;   /* teks utama / forest */
  --muted:  #6B7A63;   /* teks sekunder */
  --accent: #4E8A57;   /* garis / teks aksi */
  --fill:   #609966;   /* bg tombol primary */
  --sage:   #9DBF8A;   /* dekor / border halus */
  --hair:   rgba(63, 81, 59, 0.12);   /* hairline border */

  /* --- Shadow tunggal (satu-satunya, no glow) --- */
  --shadow: 0 1px 2px rgba(63, 81, 59, 0.06), 0 8px 24px rgba(63, 81, 59, 0.05);
  --shadow-card: 0 6px 20px rgba(63, 81, 59, 0.12); /* tooltip / friend-card */

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

  /* --- Font family --- */
  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Type scale --- */
  --h1:     clamp(40px, 6vw, 68px);
  --h2:     clamp(28px, 4vw, 40px);
  --h3:     20px;
  --body:   18px;
  --lead:   19px;
  --small:  13px;
  --tiny:   12px;
  --eyebrow: 13px;

  /* --- Layout --- */
  --container-read: 720px;
  --container-wide: 1040px;
  --nav-h: 64px;
  --section-pad: clamp(72px, 10vw, 128px);

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 260ms;
  --rise: 12px;
}