/* ══════════════════════════════════════════════════════════════
   LULU DESIGN TOKENS — sumber tunggal identitas visual
   Dipakai: index.html, produk.html, order-form.html,
            custom-order.html, status.html, 404.html
   TIDAK dipakai halaman kado di produk/* — itu barang yang dikirim
   ke penerima, temanya memang beda-beda per produk.

   ATURAN PAKAI
   ------------
   Semua nama diawali --lulu- supaya TIDAK bentrok dengan token lokal
   tiap halaman. Halaman memakainya lewat alias, contoh di produk.html:

       :root{ --pink-deep: var(--lulu-pink-deep); }

   Jadi kalau warna brand berubah, cukup ubah SATU baris di file ini
   dan semua halaman ikut. Sebelum ada file ini, mengubah satu warna
   berarti menyunting hex yang sama di beberapa file -- dan pernah
   kejadian satu halaman ketinggalan.

   CATATAN AKSESIBILITAS (jangan diubah tanpa hitung ulang)
   --------------------------------------------------------
   --lulu-pink-deep #D10037 dipilih karena teks sekecil 0,72rem di
   atas latar krem masih 4,87:1 dan teks putih di atasnya 5,58:1 --
   dua-duanya lolos WCAG AA. Versi lama #E8003D cuma 4,08:1 (gagal).
   Hue-nya identik, jadi ini tetap marun LuLu, cuma 10% lebih gelap.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── WARNA BRAND (pink–marun) ────────────────────────────── */
  --lulu-pink-deep:    #D10037;   /* warna utama: tombol, aksen, teks penting */
  --lulu-pink-darker:  #A8002C;   /* ujung gradien tombol */
  --lulu-pink-accent:  #FF85A1;   /* aksen lembut, garis tepi */
  --lulu-pink-light:   #FFB6C1;
  --lulu-pink-pale:    #FFE4EC;   /* latar sangat lembut */
  --lulu-cream-1:      #FFF0F3;
  --lulu-cream-2:      #FDF6F8;
  --lulu-gold:         #FFD166;   /* penanda perayaan/promo */

  /* Warna teks di ATAS isian pink. Di tema gelap pink-nya dibalik jadi
     terang, jadi teksnya harus gelap -- lihat blok tema gelap di bawah. */
  --lulu-on-pink:      #FFFFFF;

  /* ── NETRAL ──────────────────────────────────────────────── */
  --lulu-ink:          #241A1D;   /* teks utama */
  --lulu-ink-muted:    #7C6D70;   /* teks sekunder (sudah lolos AA) */
  --lulu-white:        #FFFFFF;
  --lulu-line:         rgba(209,0,55,.12);

  /* ── SPACING (dasar 4px) ─────────────────────────────────── */
  --lulu-sp-1: 4px;
  --lulu-sp-2: 8px;
  --lulu-sp-3: 12px;
  --lulu-sp-4: 16px;
  --lulu-sp-5: 20px;
  --lulu-sp-6: 24px;
  --lulu-sp-8: 32px;
  --lulu-sp-10: 40px;
  --lulu-sp-14: 56px;

  /* ── RADIUS ──────────────────────────────────────────────── */
  --lulu-r-sm:   10px;
  --lulu-r-md:   14px;
  --lulu-r-lg:   20px;
  --lulu-r-xl:   24px;
  --lulu-r-pill: 999px;

  /* ── SHADOW ──────────────────────────────────────────────── */
  --lulu-shadow-sm: 0 2px 10px rgba(0,0,0,.06);
  --lulu-shadow-md: 0 10px 30px rgba(209,0,55,.12);
  --lulu-shadow-lg: 0 18px 44px rgba(30,0,15,.14);

  /* ── TIPOGRAFI ───────────────────────────────────────────── */
  /* Playfair = judul & tagline (kesan surat/romantis)
     Inter    = antarmuka & teks panjang (paling kebaca di HP)
     Poppins  = dipakai halaman order/produk yang sudah ada */
  --lulu-font-judul: 'Playfair Display', Georgia, serif;
  --lulu-font-ui:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --lulu-font-body:  'Poppins', 'Inter', sans-serif;

  --lulu-t-xs:  .72rem;
  --lulu-t-sm:  .82rem;
  --lulu-t-md:  .92rem;
  --lulu-t-lg:  1.05rem;
  --lulu-t-xl:  1.35rem;
  --lulu-t-2xl: 1.7rem;

  /* ── TAP TARGET minimum (WCAG 2.5.5 / pedoman HIG) ───────── */
  --lulu-tap: 44px;

  /* ── IDENTITAS ───────────────────────────────────────────── */
  --lulu-tagline: 'Turning moments into memories';
}

/* Tema gelap: pink dibalik jadi TERANG supaya teks pink kebaca di latar
   hitam. Konsekuensinya teks di atas isian pink harus gelap -- kalau tetap
   putih, rasionya cuma 2,70:1 (gagal AA). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lulu-pink-deep:   #FF6B93;
    --lulu-pink-darker: #E8446F;
    --lulu-on-pink:     #2A0A18;
    --lulu-ink:         #F2F2F7;
    --lulu-ink-muted:   #98989F;
    --lulu-line:        rgba(255,255,255,.14);
  }
}
:root[data-theme="dark"] {
  --lulu-pink-deep:   #FF6B93;
  --lulu-pink-darker: #E8446F;
  --lulu-on-pink:     #2A0A18;
  --lulu-ink:         #F2F2F7;
  --lulu-ink-muted:   #98989F;
  --lulu-line:        rgba(255,255,255,.14);
}

/* ── Kelas brand siap pakai ──────────────────────────────────
   Tagline muncul di beberapa halaman; supaya bentuknya persis sama di
   mana pun, gayanya ditaruh di sini, bukan ditulis ulang per halaman. */
.lulu-tagline {
  font-family: var(--lulu-font-judul);
  font-style: italic;
  color: var(--lulu-pink-deep);
  letter-spacing: .01em;
}