/* ==========================================================================
   Design tokens — HANYA DUA WARNA.

   Seluruh tema dibangun dari dua warna di bawah ini. Semua nuansa lain
   (latar gelap, teks, garis, kartu pucat) adalah turunannya: shade, tint,
   atau alpha dari warna yang sama — bukan warna baru.

   JANGAN menulis hex baru di file CSS lain. Pakai variabel di sini.
   ========================================================================== */

:root {
  /* ---------- WARNA 1: Ink — teal tua ----------
     Dipakai untuk: latar gelap, panel, judul, teks isi, garis, bingkai. */
  --ink: #0d3b45;
  --ink-rgb: 13 59 69;

  /* ---------- WARNA 2: Gold — aksen brand (tan/bronze) ----------
     Dipakai untuk: tombol CTA, state aktif, hover, sorotan. */
  --gold: #c29f71;
  --gold-rgb: 194 159 113;

  /* ---------- Turunan Ink: shade (dicampur hitam) ---------- */
  --ink-dark: color-mix(in srgb, var(--ink) 78%, #000);
  --ink-darkest: color-mix(in srgb, var(--ink) 52%, #000);

  /* ---------- Turunan Ink: tint (dicampur putih) ---------- */
  --ink-light: color-mix(in srgb, var(--ink) 72%, #fff);
  --ink-muted: color-mix(in srgb, var(--ink) 62%, #fff); /* teks isi di latar putih */
  --ink-faint: color-mix(in srgb, var(--ink) 42%, #fff); /* teks sekunder */
  --ink-line: color-mix(in srgb, var(--ink) 18%, #fff); /* garis & bingkai */
  --ink-tint: color-mix(in srgb, var(--ink) 8%, #fff); /* latar kartu pucat */

  /* ---------- Turunan Gold ---------- */
  --gold-dark: color-mix(in srgb, var(--gold) 84%, #000); /* hover tombol */
  /* Gold murni kontrasnya terlalu rendah untuk teks di latar putih.
     Versi ini cukup gelap untuk dibaca, tapi masih satu keluarga warna. */
  --gold-text: color-mix(in srgb, var(--gold) 48%, #000);

  /* ---------- Putih di atas latar gelap (netral, bukan warna ketiga) ---------- */
  --on-dark: rgb(255 255 255 / 0.78);
  --on-dark-faint: rgb(255 255 255 / 0.55);
}