/*
 * Design tokens — bahasa visual brand Laarin Beauty Care, disarikan dari
 * design/reference-website.png & design/logo-laarin.png. Semua warna,
 * radius, shadow, dan font di aplikasi katalog wajib lewat variabel ini —
 * jangan hardcode hex/px baru di file lain.
 */

:root {
  /* Warna utama brand — tosca/turquoise dari tombol & aksen di referensi */
  --color-primary: #6ec1e4;
  --color-primary-dark: #3e96be;
  --color-primary-light: #dff3fa;

  /* Navy tua — footer, CTA banner, bar kontak atas nav */
  --color-navy: #12233e;
  --color-navy-light: #eaf6fc;

  /* Aksen oranye/coral hangat — KHUSUS elemen promo (badge "Promo" & harga
     diskon), sengaja terpisah dari --color-primary supaya kontras & menonjol */
  --color-accent: #ff8a65;
  --color-accent-dark: #e35c34;

  /* Teks — abu-abu senada wordmark logo (heading) & abu-abu lebih muda (body) */
  --color-text: #3f3f46;
  --color-text-muted: #75757e;

  /* Kartu */
  --radius-card: 1.25rem;
  --radius-pill: 999px;
  --shadow-card: 0 12px 30px -10px rgba(18, 35, 62, 0.18);
  --shadow-card-hover: 0 18px 40px -12px rgba(18, 35, 62, 0.24);

  /* Tipografi — Plus Jakarta Sans: geometris, tegas di bobot tebal,
     tetap ringan di body, senada kesan modern pada referensi */
  --font-heading: "Plus Jakarta Sans", sans-serif;
  --font-body: "Plus Jakarta Sans", sans-serif;
}