:root {
  --primary-color: #577BC1; /* Serene Blue */
  --secondary-color: #344CB7; /* Deep Blue */
  --accent-color: #AB0E86; /* Purple/Magenta Accent */
  --light-color: #EAE4D5; /* Cream/Beige */
  --highlight-color: #ECE852; /* Soft Yellow */
  --background-color: #FEFAE0; /* Very light cream */
  --text-color: #34495D; /* Dark Slate */
  
  --font-heading: 'Lora', serif;
  --font-text: 'Roboto', sans-serif;
}

body {
    font-family: var(--font-text);
    color: var(--text-color);
    background-color: var(--background-color);
}

.font-heading { font-family: var(--font-heading); }

/* Utility Classes for Variables */
.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-highlight { color: var(--highlight-color); }
.bg-primary { background-color: var(--primary-color); }
.bg-light { background-color: var(--light-color); }
.bg-accent { background-color: var(--accent-color); }
.border-accent { border-color: var(--accent-color); }
.border-highlight { border-color: var(--highlight-color); }

.custom-container {
    max-width: 1100px;
}

.product-img {
    width: 360px;
    height: auto;
    transition: transform 0.5s ease;
}

.product-img:hover {
    transform: translateY(-5px);
}