/* ==========================================================================
   TOKEN Rutin — satu-satunya tempat angka dan warna didefinisikan.
   Sistem jarak/huruf dari Beres 03 §2. Warna dari 10_Desain_Visual_Rutin.md.
   Versi 2 (22 Sep 2026): kanvas krem hangat + enam warna pastel, supaya
   terasa semenarik YuBe di HP. Semua pasangan teks/latar diukur ≥ 4.5:1.
   Kalau sebuah nilai tidak ada di sini, jangan dipakai di app.css.
   ========================================================================== */

@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  /* Jarak: kelipatan 4. */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* Huruf. Timer Fokus satu-satunya pengecualian (10 §4). */
  --fs-hero: 26px;  --fw-hero: 700;
  --fs-judul: 20px; --fw-judul: 700;
  --fs-kartu: 16px; --fw-kartu: 600;
  --fs-isi: 15px;
  --fs-meta: 13px;
  --fs-label: 11px; --fw-label: 600;
  --fs-input: 16px;
  --fs-timer: 64px;
  --tracking-kecil: 0.01em;
  --tracking-caps: 0.08em;

  /* Radius: peran, bukan ukuran. */
  --r-kecil: 10px;
  --r-kartu: 18px;
  --r-besar: 24px;
  --r-pil: 999px;

  --sentuh: 44px;

  /* Warna dasar. Kanvas krem hangat, kartu putih di atasnya. */
  --ink: #1c1c1b;
  --ink-2: #4f4f4c;
  --ink-3: #6b6b68;      /* 4.95:1 di kanvas, 5.35:1 di kertas */
  --ink-4: #9a9a95;      /* garis lingkaran & placeholder saja */
  /* Versi 3: kanvas abu kebiruan yang sejuk, bukan krem (krem = YuBe). */
  --kanvas: #f3f5f9;
  --paper: #ffffff;
  --soft: #eceff5;
  --rule: #e4e8ef;
  --rule-kuat: #d2d8e2;

  /* Biru Rutin — merek. */
  --biru-100: #e3edfc;
  --biru-300: #9dc0f2;
  --biru-500: #2563c9;   /* isi tombol, teks putih 5.67:1 */
  --biru-700: #1e4fa8;   /* teks biru, 6.49:1 di biru-100 */
  --merek: var(--biru-500);
  --merek-teks: var(--biru-700);
  --merek-latar: var(--biru-100);
  --di-merek: #ffffff;

  /* Enam warna pastel: aksen kartu + warna label (10 §3).
     -l = latar, -t = teks di atas latar itu (semua ≥ 5.3:1). */
  --biru-l: #e3edfc;   --biru-t: #1e4fa8;
  --mint-l: #dcf3e8;   --mint-t: #16684a;   --mint-isi: #2f9e6f;
  --peach-l: #fde8d7;  --peach-t: #984510;
  --lilac-l: #ebe6fc;  --lilac-t: #5a44b0;
  --kuning-l: #fcf1cb; --kuning-t: #7d5a06;
  --pink-l: #fce3ea;   --pink-t: #a1375a;

  /* Gradasi kartu sapaan, per waktu. */
  --hero-pagi: linear-gradient(135deg, #dff0ff 0%, #fde8d7 100%);
  --hero-siang: linear-gradient(135deg, #d8ecff 0%, #dcf3e8 100%);
  --hero-sore: linear-gradient(135deg, #fde2cf 0%, #ebe6fc 100%);
  --hero-malam: linear-gradient(135deg, #2b3a78 0%, #4a3f8f 100%);
  --hero-teks: var(--ink);

  /* Hari Berat: netral hangat, bukan abu mati (10 §3). */
  --berat-latar: #f1ede6;

  /* Merah hanya untuk aksi merusak. Tidak pernah untuk "gagal". */
  --hapus: #b91c1c;

  --nav-latar: rgba(255, 255, 255, .92);
  --bayang-kartu: 0 1px 2px rgba(40, 30, 10, .04), 0 6px 20px rgba(40, 30, 10, .05);
  --bayang-angkat: 0 10px 30px rgba(20, 20, 40, .14);
  --bayang-1: 0 -1px 0 var(--rule), 0 12px 32px rgba(10, 10, 10, .14);
  --tirai: rgba(20, 18, 14, .45);

  --durasi: 160ms;
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Mode gelap: ikut sistem, kecuali pengguna memilih "Terang" di Pengaturan.
   Blok yang sama diulang untuk pilihan "Gelap" (CSS tidak bisa berbagi blok). */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) {
    --ink: #f2f2f0; --ink-2: #cfcfca; --ink-3: #a8a8a3; --ink-4: #6f6f6a;
    --kanvas: #121211; --paper: #1a1a19; --soft: #232321; --rule: #2a2a28; --rule-kuat: #3a3a37;
    --merek-teks: #9cc0ff; --merek-latar: #172742;
    --biru-l: #172742; --biru-t: #9cc0ff;
    --mint-l: #12291f; --mint-t: #7fd8ae; --mint-isi: #3fbf8a;
    --peach-l: #33200f; --peach-t: #f7b27f;
    --lilac-l: #231d3d; --lilac-t: #b8a9f5;
    --kuning-l: #2e2610; --kuning-t: #f0cf6a;
    --pink-l: #351a24; --pink-t: #f3a3bd;
    --hero-pagi: linear-gradient(135deg, #1b2c4a 0%, #3a2618 100%);
    --hero-siang: linear-gradient(135deg, #172a45 0%, #133024 100%);
    --hero-sore: linear-gradient(135deg, #3a2417 0%, #2a2248 100%);
    --hero-malam: linear-gradient(135deg, #1a2350 0%, #2e2560 100%);
    --berat-latar: #26221c; --hapus: #f87171;
    --nav-latar: rgba(26, 26, 25, .92);
    --bayang-kartu: 0 1px 2px rgba(0, 0, 0, .3);
    --tirai: rgba(0, 0, 0, .62);
  }
}
:root[data-tema="gelap"] {
  --ink: #f2f2f0; --ink-2: #cfcfca; --ink-3: #a8a8a3; --ink-4: #6f6f6a;
  --kanvas: #121211; --paper: #1a1a19; --soft: #232321; --rule: #2a2a28; --rule-kuat: #3a3a37;
  --merek-teks: #9cc0ff; --merek-latar: #172742;
  --biru-l: #172742; --biru-t: #9cc0ff;
  --mint-l: #12291f; --mint-t: #7fd8ae; --mint-isi: #3fbf8a;
  --peach-l: #33200f; --peach-t: #f7b27f;
  --lilac-l: #231d3d; --lilac-t: #b8a9f5;
  --kuning-l: #2e2610; --kuning-t: #f0cf6a;
  --pink-l: #351a24; --pink-t: #f3a3bd;
  --hero-pagi: linear-gradient(135deg, #1b2c4a 0%, #3a2618 100%);
  --hero-siang: linear-gradient(135deg, #172a45 0%, #133024 100%);
  --hero-sore: linear-gradient(135deg, #3a2417 0%, #2a2248 100%);
  --hero-malam: linear-gradient(135deg, #1a2350 0%, #2e2560 100%);
  --berat-latar: #26221c; --hapus: #f87171;
  --nav-latar: rgba(26, 26, 25, .92);
  --bayang-kartu: 0 1px 2px rgba(0, 0, 0, .3);
  --tirai: rgba(0, 0, 0, .62);
}

@media (prefers-reduced-motion: reduce) {
  :root { --durasi: 0ms; }
  /* `--durasi` saja tidak cukup: keyframes yang durasinya ditulis langsung
     (sheet naik, tirai pudar, bendera berkibar) tetap jalan. Dimatikan di satu
     tempat, bukan diingat satu per satu. Tidak dibuat `none` supaya keadaan
     akhir keyframes tetap dipakai, jadi tidak ada yang hilang dari layar. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}