/*
 * tokens.css — PT Asuransi Intra Asia
 * Single source of truth untuk semua design token (CSS Custom Properties).
 *

 *   File ini dimuat SEBELUM main.css. Saat ini main.css masih mendefinisikan
 *   ulang properti yang sama dengan nilai identik — main.css menang karena
 *   posisi lebih belakang dalam cascade. Zero visual impact dijamin.
 *   Setelah Batch 1+, definisi duplikat di main.css dihapus satu per satu
 *   dan tokens.css menjadi satu-satunya sumber.
 *
 * BREAKPOINT REFERENCE (gunakan di media query sebagai angka literal,
 * bukan var() — CSS tidak mendukung var() di dalam @media):
 *   480px   -> sm  (HP layar besar)
 *   768px   -> md  (tablet portrait)
 *   1024px  -> lg  (tablet landscape / laptop kecil)
 *   1280px  -> xl  (laptop standard)
 *   1600px  -> 2xl (monitor besar / TV)
 *
 * Semua refactor baru menggunakan min-width (mobile-first).
 */

/* ── TIPOGRAFI ────────────────────────────────────────────────────── */
:root {
  --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
                  sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
                  "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Nunito Sans", sans-serif;
  --nav-font:     "Poppins", sans-serif;
}

/* ── WARNA GLOBAL ─────────────────────────────────────────────────── */
:root {
  --background-color:   #ecfbfe;   /* background utama seluruh halaman */
  --backgroundMenu-color: #1e333e; /* background header / nav */
  --default-color:      #555555;   /* teks body default */
  --heading-color:      #364146;   /* warna h1–h6 global */
  --accent-color:       #009cea;   /* warna brand utama — tombol, link aktif */
  --surface-color:      #ffffff;   /* card, icon box, elemen berkotak */
  --contrast-color:     #ffffff;   /* teks di atas accent/heading/dark */
}

/* ── WARNA NAV ────────────────────────────────────────────────────── */
:root {
  --nav-color:                    #828c91;   /* link navmenu default */
  --nav-hover-color:              #009cea;   /* link navmenu hover / active */
  --nav-mobile-background-color:  #ffffff;   /* bg mobile navmenu */
  --nav-dropdown-background-color:#ffffff;   /* bg dropdown */
  --nav-dropdown-color:           #555555;   /* teks dropdown link */
  --nav-dropdown-hover-color:     #009cea;   /* teks dropdown link hover */
}

/* ── WARNA STATUS (form feedback) ────────────────────────────────── */
:root {
  --color-error:   #df1529;   /* error message bg (php-email-form) */
  --color-success: #059652;   /* success / sent message bg */
}

:root {
  --product-navy:        #0A192F;   /* bg section gelap */
  --product-navy-mid:    #1E3A8A;   /* aksen biru navy tengah */
  --product-blue:        #0EA5E9;   /* biru brand product (vs --accent-color #009cea) */
  --product-blue-pale:   #38BDF8;   /* biru muda / highlight */
  --product-white:       #FFFFFF;
  --product-gray:        #F8FAFC;   /* bg section abu-abu muda */
  --product-text:        #0F172A;   /* teks utama product page */
  --product-muted:       #64748B;   /* teks sekunder */
  --product-border:      #E2E8F0;   /* garis batas / divider */
  --product-radius:      12px;      /* border-radius card / elemen */
  --product-transition:  0.2s ease; /* durasi transisi default */
  --product-section-pad: 48px 0;   /* padding section mobile (standar 11/12 produk) */
}

@media (min-width: 768px) {
  :root { --product-section-pad: 80px 0; }
}

/* ── SCROLL BEHAVIOR  */
:root {
  scroll-behavior: smooth;
}