: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", sans-serif;
  --font-text: "DM Sans", sans-serif;
  --font-mono: "DM Mono", monospace;
  --font-hand: "Gochi Hand", cursive;
  --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);
}

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;
}