/*
 * INDIANSPICEROUTE — Color Reference
 * Single source of truth for all brand colors.
 * Based on the Indian National Flag palette.
 * Never hard-code hex values in component CSS — always reference these variables.
 */

:root {
  /* ── Layout ── */
  --site-nav-h: 120px;   /* sticky nav height; mobile menu & sticky tab bars offset by this */

  /* ── Indian Flag: Saffron (top stripe) ── */
  --saffron:        #FF9933;
  --saffron-dark:   #E8821A;
  --saffron-light:  #FFF3E0;
  --saffron-pale:   #FFF8F0;

  /* ── Indian Flag: White (middle stripe) ── */
  --india-white:    #FFFFFF;

  /* ── Indian Flag: India Green (bottom stripe) ── */
  --india-green:        #138808;
  --india-green-dark:   #0D6B06;
  --india-green-light:  #E8F5E9;
  --india-green-pale:   #F1FAF1;

  /* ── Ashoka Chakra: Navy Blue (wheel) ── */
  --chakra-navy:        #000080;
  --chakra-navy-light:  #3333AA;
  --chakra-navy-pale:   #E8E8F5;

  /* ── Neutrals ── */
  --neutral-100:  #FFFFFF;
  --neutral-200:  #F5F5F5;
  --neutral-300:  #E5E5E5;
  --neutral-400:  #CCCCCC;
  --neutral-500:  #999999;
  --neutral-600:  #666666;
  --neutral-700:  #444444;
  --neutral-800:  #2A2A2A;
  --neutral-900:  #1A1A1A;

  /* ── Dark Theme Warm Darks ── */
  --dark-bg-900:  #120C04;
  --dark-bg-800:  #1E1408;
  --dark-bg-700:  #2A1E0D;
  --dark-bg-600:  #3A2C18;
  --dark-text-100: #F5EFE6;
  --dark-text-200: #DDD0BA;
  --dark-text-300: #BBA888;

  /* ── Semantic / Status ── */
  --color-veg:      var(--india-green);
  --color-non-veg:  #CC3300;
  --color-special:  var(--saffron);
}