/* ==========================================================================
   variables.css — design token Bakso Tjap Haji
   Semua nilai diambil langsung dari lima gambar referensi (kanvas 1920 px).
   Satuan: 1rem = 16 px pada layar 1920 px (lihat global.css).
   ========================================================================== */

:root {
  /* ---------- Warna (hasil color-pick dari Page 1–5.png) ---------- */
  --color-cream: #edebd8;        /* rgb(237,235,216) — latar navbar */
  --color-beige: #d1ceb8;        /* rgb(209,206,184) — latar halaman */
  --color-red: #b02120;          /* rgb(176,33,32)  — merah utama    */
  --color-red-dark: #8e1a19;     /* hover tombol                     */
  --color-white: #ffffff;
  --color-black: #111111;
  --color-text: #1a1a1a;
  --footer-color: var(--color-red);

  /* Overlay cream transparan pada halaman Profile (alpha terukur 0.55) */
  --overlay-cream: rgba(237, 235, 216, 0.55);
  --overlay-width: 45.68%;

  /* ---------- Tipografi ---------- */
  --font-body: "Poppins", "Segoe UI", Arial, Helvetica, sans-serif;
  --font-script: "Kaushan Script", "Segoe Script", "Brush Script MT", cursive;

  --fs-nav: 1.5rem;              /* 24 px */
  --fs-copyright: 1.25rem;       /* 20 px */
  --fs-footer-text: 1.25rem;     /* 20 px */
  --fs-profile-body: 1rem;       /* 16 px */
  --fs-profile-title: 2.25rem;   /* 36 px */
  --fs-kontak-label: 1.5rem;     /* 24 px */
  --fs-kontak-body: 1.5rem;      /* 24 px */
  --fs-menu-title: 3rem;         /* 48 px */
  --fs-menu-price: 1.75rem;      /* 28 px */
  --fs-menu-item: 2.5rem;        /* 40 px */
  --fs-drink: 3rem;              /* 48 px */
  --fs-testi-heading: 2.5rem;    /* 40 px */
  --fs-testi-button: 2.5rem;     /* 40 px */

  /* ---------- Header / navigasi ---------- */
  --header-height: 14.0625rem;   /* 225 px */
  --logo-width: 38.75rem;        /* 620 px */
  --logo-height: 10.125rem;      /* 162 px */
  --logo-offset-x: 1rem;         /* 16 px */
  --logo-offset-y: 2.25rem;      /* 36 px */

  --nav-item-width: 12.75rem;    /* 204 px — lebar kotak menu aktif */
  --nav-slot-width: 14.96875rem; /* 239.5 px — jarak antar-titik tengah menu */
  --nav-total-width: 74.84375rem;/* 5 x 239.5 px */
  --nav-item-height: 6.5625rem;  /* 105 px */
  --nav-gap: 2.21875rem;         /* 35.5 px */
  --nav-edge: 2.140625rem;       /* 34.25 px */
  --nav-center-y: 10.5625rem;    /* 169 px — sumbu vertikal teks menu */
  --pill-radius: 2.1875rem;      /* 35 px */
  --pill-border: 0.875rem;       /* 14 px */
  --pill-drop: 3.46875rem;       /* 55.5 px — pergeseran menu aktif ke bawah */
  --pill-slide-duration: 480ms;  /* lama animasi geser kotak menu aktif */
  --pill-slide-ease: cubic-bezier(0.65, 0.02, 0.28, 1);

  /* ---------- Footer ---------- */
  --footer-height: 5.5rem;       /* 88 px  */
  --footer-height-home: 10.75rem;/* 172 px */

  /* ---------- Lain-lain ---------- */
  --radius-card: 3.125rem;       /* 50 px */
  --radius-field: 2.5rem;        /* 40 px */
  --focus-ring: 0.1875rem;       /* 3 px  */
  --design-width: 1920;
}