/*
 * Theme variables. Edit these to experiment with the site's color scheme.
 * Loaded before style.css and modern.css, so any rule there can reference
 * these via var(--name) and will pick up changes made here.
 *
 * Currently set to the site's ORIGINAL blue/cyan colors (exact values
 * copied from style.css's .most-selling/.honeymoon/.banner-btn gradients)
 * so the visual output matches production while we work section by
 * section. Change these values (not the rules that use them) to
 * experiment with new colors later.
 */
:root {
  /* site-wide typeface (loaded from Google Fonts in includes/head.php) */
  --font-primary: 'Poppins', sans-serif;

  --color-text: #707070;
  --color-white: #ffffff;
  --color-dark: #000000;

  /* .most-selling / .honeymoon section background gradient (left to right) */
  --color-section-start: rgb(8, 184, 247);
  --color-section-mid: rgb(8, 167, 244);
  --color-section-end: rgb(6, 138, 240);

  /* .banner-btn gradient (135deg, 4-stop) */
  --color-btn-start: rgb(0, 215, 132);
  --color-btn-mid1: rgb(0, 196, 155);
  --color-btn-mid2: rgb(0, 174, 183);
  --color-btn-end: rgb(0, 161, 202);

  /* WhatsApp uses its own recognizable brand green - intentional, not part
     of the site palette. */
  --color-whatsapp: #25d366;
  --color-whatsapp-dark: #1ebe57;

  /* mobile nav logo height - shared by the top bar and the drawer header
     so the two always stay in sync */
  --nav-logo-height: 32px;

  /* spacing / shape tokens for the modern card layer - unrelated to color,
     left as-is */
  --radius-card: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 10px 28px rgba(0, 0, 0, 0.14);
}