/* Token desain. Warna berganti lewat <html data-theme="kebun|laut|balon">.
   Mekanik game sama di semua tema, hanya visual yang beda. */

@font-face {
  font-family: 'Andika';
  src: url('/assets/fonts/andika-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Andika';
  src: url('/assets/fonts/andika-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --font: 'Andika', 'Trebuchet MS', system-ui, sans-serif;

  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 32px;
  --tap: 56px; /* target sentuh minimum untuk jari anak */
  --gap: 16px;
  --shadow-drop: 0 5px 0; /* tombol 3D: bayangan bawah solid */
  --tekan: 3px; /* tombol turun saat ditekan */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Netral bersama */
  --c-danger: #c2410c;

  /* Elemen game bersama: koin level, tombol dengar, pilihan jawaban, dekorasi peta */
  --c-koin: #ffc533;
  --c-koin-dark: #d99400;
  --c-koin-ink: #3b2a1a;
  --c-kunci: #c5cdd5;
  --c-kunci-dark: #96a1ab;
  --c-kunci-ink: #46505a; /* 5.1:1 di abu-abu kunci */
  --c-biru: #2f8fdc;
  --c-biru-dark: #1d67a6;
  --c-biru-ink: #ffffff;
  --c-pilih: #ff9330;
  --c-pohon-daun: #3fae49;
  --c-pohon-daun-gelap: #2b8a35;
  --c-pohon-batang: #8a5a2b;
  --c-pagar: #b8743a;
  --c-pagar-gelap: #85501f;
}

/* Kebun Hewan (default): latar biru langit muda, kartu putih, hijau daun, kuning jerami, cokelat.
   Tanpa krem/beige. Kontras teks (cek WCAG AA): cokelat tua di putih 13.7:1, di latar 12:1. */
:root,
[data-theme='kebun'] {
  --c-bg: #e3f2fd;
  --c-bg-deep: #c6e4f7;
  --c-surface: #ffffff;
  --c-ink: #3b2a1a;
  --c-ink-soft: #6b4f36;
  --c-line: #bcd8ec;

  /* teks putih di tombol hijau 4.5:1 */
  --c-primary: #3d862b;
  --c-primary-dark: #2b6420;
  --c-primary-ink: #ffffff;

  --c-accent: #f2c94c;
  --c-accent-dark: #c99a1c;
  --c-accent-ink: #3b2a1a;

  --c-warm: #c58b4e;
  --c-warm-dark: #8f5f30;

  --theme-color: #3d862b;
}

/* Bawah Laut: biru laut, tosca, oranye koral */
[data-theme='laut'] {
  --c-bg: #e8f6f8;
  --c-bg-deep: #c9e9ee;
  --c-surface: #ffffff;
  --c-ink: #0f2e4a;
  --c-ink-soft: #3d5f7a;
  --c-line: #b9dbe3;

  --c-primary: #1e5aa8;
  --c-primary-dark: #143f78;
  --c-primary-ink: #ffffff;

  --c-accent: #ff8a5b;
  --c-accent-dark: #d4612f;
  --c-accent-ink: #2a1206;

  --c-warm: #2bb3a3;
  --c-warm-dark: #1b8478;

  --theme-color: #1e5aa8;
}

/* Balon Udara: biru langit, kuning, merah bata */
[data-theme='balon'] {
  --c-bg: #eef7fd;
  --c-bg-deep: #d3eaf8;
  --c-surface: #ffffff;
  --c-ink: #2a2233;
  --c-ink-soft: #5b5266;
  --c-line: #cfe0ec;

  --c-primary: #b5482f;
  --c-primary-dark: #873220;
  --c-primary-ink: #ffffff;

  --c-accent: #ffd23f;
  --c-accent-dark: #d1a60f;
  --c-accent-ink: #2a2233;

  --c-warm: #5ab4e5;
  --c-warm-dark: #3a8cba;

  --theme-color: #5ab4e5;
}

/* Latar layar game dan peta: langit + bukit + jalan setapak (dipakai ui/latar.js) */
:root,
[data-theme='kebun'] {
  --c-langit-atas: #a9dcf7;
  --c-langit-bawah: #e9f7ff;
  --c-bukit-jauh: #8fd468;
  --c-bukit-dekat: #5cbd3f;
  --c-jalan: #d39b5c;
}
[data-theme='laut'] {
  --c-langit-atas: #8fd8e8;
  --c-langit-bawah: #4fa3d8; /* teks gelap tetap 5:1 di dasar laut */
  --c-bukit-jauh: #2bb3a3;
  --c-bukit-dekat: #1b8478;
  --c-jalan: #ff9f7a;
}
[data-theme='balon'] {
  --c-langit-atas: #7cc8f0;
  --c-langit-bawah: #e6f5fd;
  --c-bukit-jauh: #b8dc8f;
  --c-bukit-dekat: #87c05e;
  --c-jalan: #d39b5c;
}