/* Livity App — token desain. Arah Tegas: putih, hitam, satu keluarga huruf, tanpa bayangan.
   Sumber: docs/03-DESAIN.md. Ubah di dokumen itu dulu, baru di sini. */

:root {
  color-scheme: light dark;

  --kanvas: #ffffff;        /* latar halaman */
  --permukaan: #f5f5f5;     /* ubin tanpa foto, latar gambar keadaan kosong, tombol ikon, kerangka memuat */
  --tinta: #000000;         /* teks dan judul */
  --tinta-redup: #6e6e73;   /* teks kedua */
  --garis: #e5e5e5;         /* garis pemisah daftar */
  --garis-kolom: #767677;   /* garis kolom isian dan tombol sekunder */
  --utama: #000000;         /* tombol utama */
  --utama-tinta: #ffffff;
  --aksen: #1e7a55;         /* hijau Livity: batang okupansi, tanda menu aktif, cincin fokus tombol */
  --emas: #b08d3c;          /* hanya untuk isi batang unit 100% terisi */
  --emas-teks: #7a5f1e;     /* emas yang cukup gelap untuk tulisan */
  --baik: #1e7a55;
  --awas: #9a5b00;
  --bahaya: #b3261e;
  --jejak: #e5e5e5;         /* dasar batang */

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --sisi: 20px;             /* jarak tepi kiri dan kanan di HP */
  --radius-kolom: 8px;      /* kolom isian */
  --radius-lembar: 20px;    /* sudut atas lembar bawah */
  --radius-pil: 999px;      /* tombol dan pil status */
  --celah: 8px;             /* jarak antar foto */
  --bayang-lembar: 0 -8px 32px rgba(0, 0, 0, .12);  /* hanya untuk lembar bawah */

  --tinggi-nav: 64px;       /* bilah bawah di HP */
  --lebar-rel: 248px;       /* rel samping di desktop */
  --cepat: 150ms;
  --sedang: 200ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --kanvas: #000000;
    --permukaan: #1c1c1e;
    --tinta: #ffffff;
    --tinta-redup: #a1a1a6;
    --garis: #2c2c2e;
    --garis-kolom: #8e8e93;
    --utama: #ffffff;
    --utama-tinta: #000000;
    --aksen: #4fc08f;
    --emas: #d4b566;
    --emas-teks: #d4b566;
    --baik: #4fc08f;
    --awas: #f0b35a;
    --bahaya: #ff8a80;
    --jejak: #2c2c2e;
    --bayang-lembar: 0 -8px 32px rgba(0, 0, 0, .6);
  }
}