/* ==========================================================================
   Design tokens
   Satu-satunya tempat untuk warna, font, ukuran, dan motion.
   Komponen cukup membaca variabel di sini — jangan hardcode hex di file lain.
   ========================================================================== */

:root {
  /* --- Palet dasar ------------------------------------------------------- */
  /* Forest: "tinta" — teks, border, hard shadow */
  --forest-100: #dde6da;
  --forest-200: #b4c5af;
  --forest-400: #6f8a69;
  --forest-600: #3e5c38;
  --forest-800: #283f24; /* warna utama */
  --forest-900: #1b2b18;
  --forest-950: #121c10;

  /* Amber: aksen — tombol, highlight, stiker */
  --amber-100: #fff0c2;
  --amber-200: #ffe28a;
  --amber-300: #ffd34d;
  --amber-500: #ffbf00; /* warna utama */
  --amber-600: #e0a800;
  --amber-700: #b88900;
  --amber-800: #8a6700;

  /* Lemon: "kertas" — background section */
  --lemon-50: #fffde6;
  --lemon-100: #fffbc9;
  --lemon-200: #fff78d; /* warna utama */
  --lemon-400: #f7ec5e;
  --lemon-600: #d9cd3a;
  --lemon-700: #a89e1f;
  --lemon-800: #706912;

  /* --- Peran warna --------------------------------------------------------- */
  --color-page: var(--forest-800);   /* area kiri-kanan di desktop */
  --color-paper: var(--lemon-200);
  --color-paper-soft: var(--lemon-50);
  --color-accent: var(--amber-500);
  --color-ink: var(--forest-800);
  --color-ink-strong: var(--forest-950);
  --color-ink-soft: var(--forest-600);
  --color-on-ink: var(--lemon-200);  /* teks di atas background forest */

  /* --- Tipografi ----------------------------------------------------------- */
  --font-body: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Stack Sans Notch", "Space Grotesk", ui-sans-serif, sans-serif;
  --font-amp: "Oi", "Stack Sans Notch", serif;

  /* Skala fluid. Frame maksimal 430px, jadi nilai max = ukuran di 430px. */
  --fs-xs: clamp(0.6875rem, 2.8vw, 0.75rem);   /* 11–12px  label, meta */
  --fs-sm: clamp(0.8125rem, 3.4vw, 0.875rem);  /* 13–14px */
  --fs-base: clamp(0.9375rem, 3.9vw, 1rem);    /* 15–16px  body */
  --fs-md: clamp(1.125rem, 4.8vw, 1.25rem);    /* 18–20px */
  --fs-lg: clamp(1.5rem, 6.6vw, 1.75rem);      /* 24–28px */
  --fs-xl: clamp(2rem, 9vw, 2.5rem);           /* 32–40px */
  --fs-2xl: clamp(2.75rem, 13vw, 3.5rem);      /* 44–56px */
  --fs-3xl: clamp(3.5rem, 18vw, 4.75rem);      /* 56–76px  nama besar */

  --lh-tight: 0.95;
  --lh-snug: 1.2;
  --lh-body: 1.6;

  /* --- Ruang & bentuk ------------------------------------------------------ */
  --frame-max: 26.875rem; /* 430px */
  /* 40px di frame 412px (ukuran desain), mengecil di HP sempit */
  --gutter: clamp(1.5rem, 9.7vw, 2.5rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  --border-w: 0.1875rem; /* 3px */
  --border: var(--border-w) solid var(--color-ink-strong);
  --shadow-hard: 0.375rem 0.375rem 0 var(--color-ink-strong);
  --shadow-hard-sm: 0.1875rem 0.1875rem 0 var(--color-ink-strong);

  /* --- Motion -------------------------------------------------------------- */
  /* Snappy & mekanis: sedikit overshoot.
     --dur-enter / --dur-exit = default animasi masuk / keluar section.
     --dur-base = interaksi UI kecil (mis. tombol musik). */
  --dur-enter: 800ms;
  --dur-exit: 300ms;
  --dur-fast: 160ms;
  --dur-base: 300ms;
  --dur-slow: 560ms;
  --ease-snap: cubic-bezier(0.2, 0.9, 0.1, 1);
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-hard: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-cinematic: cubic-bezier(0.65, 0, 0.35, 1); /* pelan-cepat-pelan */
  --ease-drift: cubic-bezier(0, 0, 0.58, 1);       /* gerak pelan & lama */
  --stagger: 70ms;

  /* --- Layer --------------------------------------------------------------- */
  --z-section: 1;
  --z-float: 50;   /* tombol musik */
}