/**
 * Fantastic Ice Creame - CSS Color Constants
 * Brand Color Palette & Design System
 * Generated: November 2025
 */

:root {
  /* ============================================
     PRIMARY BRAND COLORS
     ============================================ */
  
  /* Vibrant Pink - Primary brand color */
  --color-primary-pink: #E91E63;
  --color-primary-pink-light: #F06292;
  --color-primary-pink-dark: #C2185B;
  
  /* Golden Yellow - Accent & borders */
  --color-primary-yellow: #FFD54F;
  --color-primary-yellow-bright: #FFEB3B;
  --color-primary-yellow-dark: #FBC02D;
  
  /* ============================================
     SECONDARY COLORS (Ingredient Inspired)
     ============================================ */
  
  /* Chocolate Browns */
  --color-chocolate-dark: #3E2723;
  --color-chocolate-medium: #5D4037;
  --color-chocolate-light: #8D6E63;
  
  /* Nut & Caramel Tones */
  --color-almond-cream: #D4A574;
  --color-caramel: #CD853F;
  --color-hazelnut: #8B6F47;
  
  /* Fruit & Berry Tones */
  --color-strawberry-red: #E53935;
  --color-raspberry: #AB47BC;
  --color-fig-purple: #6A1B9A;
  
  /* Pistachio & Green */
  --color-pistachio-green: #9CCC65;
  --color-mint-green: #4DB8A8;
  
  /* Citrus & Bright */
  --color-lemon-yellow: #FDD835;
  --color-orange-citrus: #FB8C00;
  
  /* ============================================
     NEUTRAL COLORS
     ============================================ */
  
  /* Background Colors */
  --color-bg-white: #FFFFFF;
  --color-bg-cream: #FFFEF0;
  --color-bg-light-gray: #F5F5F5;
  
  /* Text Colors */
  --color-text-black: #1A1A1A;
  --color-text-dark-gray: #333333;
  --color-text-medium-gray: #666666;
  --color-text-light-gray: #999999;
  
  /* Accent Neutrals */
  --color-white-cloud: #F0F0F0;
  --color-shadow-black: #000000;
  
  /* ============================================
     SEMANTIC COLOR ALIASES (for UI components)
     ============================================ */
  
  /* Status Colors */
  --color-success: #9CCC65;
  --color-warning: #FB8C00;
  --color-error: #E53935;
  --color-info: #4DB8A8;
  
  /* UI Elements */
  --color-border: #FFD54F;
  --color-border-light: #FFEB3B;
  --color-hover: #F06292;
  --color-active: #C2185B;
  --color-disabled: #999999;
  
  /* ============================================
     OVERLAY & TRANSPARENCY
     ============================================ */
  
  --color-overlay-pink-light: rgba(233, 30, 99, 0.1);
  --color-overlay-pink-medium: rgba(233, 30, 99, 0.3);
  --color-overlay-pink-strong: rgba(233, 30, 99, 0.7);
  
  --color-overlay-yellow-light: rgba(255, 213, 79, 0.1);
  --color-overlay-yellow-medium: rgba(255, 213, 79, 0.3);
  
  --color-overlay-dark: rgba(0, 0, 0, 0.1);
  --color-overlay-dark-strong: rgba(0, 0, 0, 0.3);
}

/* ============================================
   UTILITY COLOR CLASSES
   ============================================ */

.bg-primary {
  background-color: var(--color-primary-pink);
}

.bg-primary-light {
  background-color: var(--color-primary-pink-light);
}

.bg-accent {
  background-color: var(--color-primary-yellow);
}

.bg-dark {
  background-color: var(--color-chocolate-dark);
}

.bg-cream {
  background-color: var(--color-bg-cream);
}

.text-primary {
  color: var(--color-primary-pink);
}

.text-accent {
  color: var(--color-primary-yellow);
}

.text-dark {
  color: var(--color-text-black);
}

.text-secondary {
  color: var(--color-text-medium-gray);
}

.text-light {
  color: var(--color-text-light-gray);
}

.border-primary {
  border-color: var(--color-primary-yellow);
}

.border-pink {
  border-color: var(--color-primary-pink);
}

/* ============================================
   COLOR GRADIENTS
   ============================================ */

.gradient-pink-to-yellow {
  background: linear-gradient(135deg, var(--color-primary-pink) 0%, var(--color-primary-yellow) 100%);
}

.gradient-chocolate-to-caramel {
  background: linear-gradient(135deg, var(--color-chocolate-dark) 0%, var(--color-caramel) 100%);
}

.gradient-fruit-blend {
  background: linear-gradient(135deg, var(--color-strawberry-red) 0%, var(--color-raspberry) 50%, var(--color-fig-purple) 100%);
}

/* ============================================
   SHADOW & ELEVATION
   ============================================ */

.shadow-light {
  box-shadow: 0 2px 4px var(--color-overlay-dark);
}

.shadow-medium {
  box-shadow: 0 4px 8px var(--color-overlay-dark);
}

.shadow-dark {
  box-shadow: 0 8px 16px var(--color-overlay-dark-strong);
}

/* ============================================
   HOVER & INTERACTION STATES
   ============================================ */

.btn-primary {
  background-color: var(--color-primary-pink);
  color: var(--color-bg-white);
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--color-primary-pink-dark);
}

.btn-primary:active {
  background-color: var(--color-primary-pink-dark);
  box-shadow: inset 0 2px 4px var(--color-overlay-dark-strong);
}

.btn-secondary {
  background-color: var(--color-primary-yellow);
  color: var(--color-chocolate-dark);
  transition: background-color 0.3s ease;
}

.btn-secondary:hover {
  background-color: var(--color-primary-yellow-dark);
}