/*
* Global Color System for Demo Site
* This file contains all color variables that can be used throughout the site
*/

:root {
  /* Primary Color Palette */
  --light-green: #E3F2AA;
  --dark-green: #9fbe1b;
  --dark-grey: #333333;
  
  --light-blue: #CEE5EF;
  --dark-blue: #2C539F;
  --site-blue: #0c79e7;
  --cart-button: #222e3a;

  /* Pricing Colors */
  --mrp-light-blue: #cde3ef;
  --pay-light-green: #E3F2AA;
  
  /* Additional Utility Colors */
  --white: #ffffff;
  --black: #000000;
  --light-gray: #f3f4f6;
  --medium-gray: #d1d5db;
  --dark-gray: #4b5563;
  
  /* Status Colors */
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
}

/* Global Color Classes */
.bg-light-green { background-color: var(--light-green) !important; }
.bg-dark-green { background-color: var(--dark-green) !important; }
.bg-dark-grey { background-color: var(--dark-grey) !important; }
.bg-light-blue { background-color: var(--light-blue) !important; }
.bg-dark-blue { background-color: var(--dark-blue) !important; }
.bg-mrp-light-blue { background-color: var(--mrp-light-blue) !important; }
.bg-pay-light-green { background-color: var(--pay-light-green) !important; }

.text-light-green { color: var(--light-green) !important; }
.text-dark-green { color: var(--dark-green) !important; }
.text-dark-grey { color: var(--dark-grey) !important; }
.text-light-blue { color: var(--light-blue) !important; }
.text-dark-blue { color: var(--dark-blue) !important; }
.text-mrp-light-blue { color: var(--mrp-light-blue) !important; }
.text-pay-light-green { color: var(--pay-light-green) !important; }

.border-light-green { border-color: var(--light-green) !important; }
.border-dark-green { border-color: var(--dark-green) !important; }
.border-dark-grey { border-color: var(--dark-grey) !important; }
.border-light-blue { border-color: var(--light-blue) !important; }
.border-dark-blue { border-color: var(--dark-blue) !important; }

/* Cart Added Highlight - Global Styles */
.cart-added-highlight,
.add-to-cart.cart-added-highlight, 
.add-to-cart-btn.cart-added-highlight, 
.shop-page-add-to-cart-btn.cart-added-highlight,
.related-products-container .add-to-cart-btn.cart-added-highlight,
.product-card .add-to-cart-btn.cart-added-highlight,
.card .add-to-cart-btn.cart-added-highlight {
  border: 2.5px solid #ffd600 !important; /* Yellow border */
  background: var(--dark-green) !important; /* Green background using CSS variable */
  color: var(--white) !important;
  box-shadow: 0 0 0 6px rgba(255,214,0,0.18), 0 2px 12px rgba(40,167,69,0.22) !important;
  transition: box-shadow 0.2s, border 0.2s, background 0.2s, color 0.2s !important;
  transform: scale(1.02) !important;
}

/* Ensure the highlight works on all button types */
button.cart-added-highlight,
input[type="button"].cart-added-highlight,
input[type="submit"].cart-added-highlight {
  border: 2.5px solid #ffd600 !important;
  background: var(--dark-green) !important;
  color: var(--white) !important;
  box-shadow: 0 0 0 6px rgba(255,214,0,0.18), 0 2px 12px rgba(40,167,69,0.22) !important;
  transition: box-shadow 0.2s, border 0.2s, background 0.2s, color 0.2s !important;
  transform: scale(1.02) !important;
}