:root {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0;
  --warna-krem: #f4eee6;
  --warna-krem-deck: #f4eee2;
  --warna-hijau: #23493c;
  --warna-hijau-gelap: #18362e;
  --warna-tan: #cea380;
  --warna-terracotta: #c4552d;
  --warna-terracotta-deck: #b86e51;
  --warna-cokelat: #59483e;
  --warna-olive: #7b7f64;
  --warna-charcoal: #24231f;
  --warna-cokelat-v2: #4a2f22;
  --warna-olive-v2: #6e7b3a;
  --warna-charcoal-v2: #232624;
  --kertas: var(--warna-krem);
  --tinta: var(--warna-hijau-gelap);
  --permukaan: var(--warna-hijau);
  --aksen: var(--warna-tan);
  --krem-ukur: var(--warna-krem);
  --cokelat: var(--warna-cokelat-v2);
  --olive: var(--warna-olive-v2);
  --terracotta: var(--warna-terracotta);
  --charcoal: var(--warna-charcoal-v2);
  --cokelat-deck: var(--warna-cokelat);
  --olive-deck: var(--warna-olive);
  --charcoal-deck: var(--warna-charcoal);
  --sepi: var(--olive);
  --nyaman: var(--permukaan);
  --ramai: var(--cokelat);
  --penuh: var(--terracotta);
  --font-display: "Atelier", "DM Sans";
  --font-text: "DM Sans";
  --font-mono: "DM Mono";
  --font-hand: "Gochi Hand";
  --display-soft: 0;
  --display-wonk: 0;
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-28: 1.75rem;
  --fs-44: 2.75rem;
  --fs-72: 4.5rem;
  --fs-giant: clamp(3.75rem, 14vw, 9rem);
  --sp-4: 0.25rem;
  --sp-8: 0.5rem;
  --sp-12: 0.75rem;
  --sp-16: 1rem;
  --sp-24: 1.5rem;
  --sp-32: 2rem;
  --sp-48: 3rem;
  --sp-64: 4rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --gerak-ms: 480ms;
  --gerak-cepat-ms: 180ms;
  --gerak-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gerak-muncul-ms: 640ms;
  --gerak-muncul-jarak: 24px;
  --gerak-stagger-ms: 60ms;
  --gerak-zoom: 1.06;
  --gerak-zoom-ms: 700ms;
  --gerak-tekan: 3px;
  --noise: url("./noise.svg");
  --noise-opacity: 0.035;
  --noise-block-opacity: 0.06;
  --lebar-halaman: 75rem;
  --garis: 2px solid var(--tinta);
  --tinta-terbalik: var(--warna-krem);
  --tinta-redup: var(--warna-cokelat-v2);
  --kertas-redup: var(--warna-krem-deck);
  --permukaan-gelap: var(--warna-hijau-gelap);
  --batas: var(--warna-hijau);
  --batas-kuat: var(--warna-hijau-gelap);
  --batas-terbalik: var(--warna-krem);
  --bahaya: var(--warna-terracotta);
  --kontrol-aksen: var(--warna-hijau);
  --tirai: rgba(24, 54, 46, 0.62);
  --tirai-pekat: rgb(24 54 46 / 0.78);
  --tirai-arang: #232624b8;
  --bayangan-warna: #24231f38;
  --radius-pil: 999px;
  --kartu-garis: 2px solid var(--batas);
  --sp-2: 0.125rem;
  --sp-6: 0.375rem;
  --sp-10: 0.625rem;
  --sp-14: 0.875rem;
  --sp-18: 1.125rem;
  --sp-20: 1.25rem;
  --sp-22: 1.375rem;
  --sp-26: 1.625rem;
  --sp-28: 1.75rem;
  --sp-40: 2.5rem;
  --sp-56: 3.5rem;
  --sp-80: 5rem;
  --sp-96: 6rem;
  --fs-10: 0.625rem;
  --fs-13: 0.8125rem;
  --fs-18: 1.125rem;
  --fs-22: 1.375rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --radius-2: 2px;
  --radius-6: 6px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-20: 20px;
  --radius-22: 22px;
  --radius-24: 24px;
  --radius-26: 26px;
  --radius-28: 28px;
  --radius-32: 32px;
  --radius-40: 40px;
  --radius-48: 48px;
  --putih: #fff;
  --kertas-terang: #fbf6ee;
  --kertas-hangat: #fff9ef;
  --hijau-gelap-a12: rgb(24 54 46 / 0.12);
  --hijau-gelap-a22: rgb(24 54 46 / 0.22);
  --hijau-gelap-a30: rgb(24 54 46 / 0.3);
  --hijau-gelap-a72: rgb(24 54 46 / 0.72);
  --arang-a35: rgb(36 35 31 / 0.35);
  --arang-a55: rgb(36 35 31 / 0.55);
  --hitam-a30: rgb(0 0 0 / 0.3);
  --hitam-a35: rgb(0 0 0 / 0.35);
  --hitam-a45: rgb(0 0 0 / 0.45);
  --tan-a10: rgb(206 163 128 / 0.1);
  --tan-a28: rgb(206 163 128 / 0.28);
  --tan-a75: rgb(206 163 128 / 0.75);
  --krem-a20: rgb(244 238 230 / 0.2);
  --krem-a26: rgb(244 238 230 / 0.26);
  --terracotta-a08: rgb(196 85 45 / 0.08);
  --terracotta-a28: rgb(196 85 45 / 0.28);
  --terracotta-a55: rgb(196 85 45 / 0.55);
  --terracotta-a95: rgb(196 85 45 / 0.95);
  --sepia-a10: rgb(24 20 16 / 0.1);
  --sepia-a32: rgb(24 20 16 / 0.32);
  --sepia-a72: rgb(24 20 16 / 0.72);
}

html,
body {
  font-family: var(--font-text);
  font-weight: 400;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0;
  font-variant-numeric: tabular-nums;
  background: var(--kertas);
  color: var(--tinta);
}

.display {
  font-family: var(--font-display);
  font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0;
}