/* ========================================
   FOODGASM DELIVERY - NEW COLOR SCHEME
   Based on Logo Design: G&F in Gold Oval
   ======================================== */

:root {
  /* === PRIMARY COLORS === */
  --fg-primary: #f68622;           /* Orange - headers, footers, buttons */
  --fg-primary-light: #F8A047;    /* Lighter variant for hover states */
  --fg-primary-dark: #E6751F;     /* Darker variant for active states */
  
  /* === SECONDARY COLORS === */
  --fg-secondary: #026537;         /* Green - start of gradient */
  --fg-secondary-light: #038A4A;  /* Light Green - end of gradient */
  --fg-secondary-gradient: linear-gradient(135deg, #f68622 0%, #026537 100%);
  --fg-secondary-gradient-hover: linear-gradient(135deg, #E6751F 0%, #01532A 100%);
  
  /* === BACKGROUND COLORS === */
  --fg-bg-primary: #FFFFFF;        /* White - content sections, cards */
  --fg-bg-secondary: #F8F9FA;      /* Light gray for subtle backgrounds */
  --fg-bg-tertiary: #F1F3F4;       /* Even lighter for alternating sections */
  
  /* === TEXT COLORS === */
  --fg-text-primary: #212121;      /* Charcoal - main text */
  --fg-text-secondary: #6C757D;    /* Muted Gray - secondary text */
  --fg-text-light: #9CA3AF;        /* Light gray for captions */
  --fg-text-white: #FFFFFF;        /* White text for dark backgrounds */
  
  /* === STATUS COLORS === */
  --fg-success: #2ECC71;           /* Green - success states */
  --fg-success-light: #D5F4E6;     /* Light green background */
  --fg-error: #E74C3C;             /* Red - error states */
  --fg-error-light: #FDEBEC;       /* Light red background */
  --fg-warning: #f68622;           /* Orange - warning states */
  --fg-warning-light: #FEF3E2;     /* Light orange background */
  
  /* === BORDER COLORS === */
  --fg-border-light: #E5E7EB;      /* Light borders */
  --fg-border-medium: #D1D5DB;     /* Medium borders */
  --fg-border-dark: #9CA3AF;       /* Dark borders */
  
  /* === SHADOW COLORS === */
  --fg-shadow-light: rgba(58, 58, 58, 0.1);
  --fg-shadow-medium: rgba(58, 58, 58, 0.15);
  --fg-shadow-dark: rgba(58, 58, 58, 0.25);
  
  /* === LEGACY COMPATIBILITY === */
  /* Keep old variables for backward compatibility during transition */
  --ul-primary: var(--fg-primary);
  --ul-secondary: var(--fg-secondary);
  --ul-c3: var(--fg-secondary-light);
  --ul-c4: var(--fg-bg-secondary);
  --ul-c5: var(--fg-warning);
  --ul-black: var(--fg-text-primary);
  --ul-gray: var(--fg-text-secondary);
  --ul-gray2: var(--fg-border-light);
  --ul-gradient: var(--fg-secondary-gradient);
}

/* ========================================
   GLOBAL OVERRIDES
   ======================================== */

/* Update body and base elements */
body {
  color: var(--fg-text-primary);
  background-color: var(--fg-bg-primary);
}

/* Links */
a {
  color: var(--fg-text-primary);
  transition: color 0.3s ease;
}

a:hover {
  color: var(--fg-secondary);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--fg-text-primary);
}

/* ========================================
   BUTTON STYLES
   ======================================== */

/* Primary Button - Dark Gray */
.btn-primary,
.ul-btn-primary {
  background-color: var(--ul-primary);
  border-color: var(--ul-primary);
  color: var(--white);
  transition: all 0.3s ease;
}

.btn-primary:hover,
.ul-btn-primary:hover {
  background-color: var(--ul-primary);
  border-color: var(--ul-primary);
  color: var(--white)!important;
}

.btn-primary:active,
.ul-btn-primary:active {
  background-color: var(--fg-primary-dark);
  border-color: var(--fg-primary-dark);
  transform: translateY(0);
}

/* Secondary Button - Gold Gradient */
.btn-secondary,
.ul-btn-secondary {
  background: var(--fg-secondary);
  border: none;
  color: var(--fg-text-white);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.btn-secondary:hover{
  background: var(--ul-secondary)!important;
  color: var(--white)!important;
}
.btn-secondary:active,
.ul-btn-secondary:active {
  transform: translateY(0);
}

/* Outline Buttons */
.btn-outline-primary {
  border-color: var(--fg-primary);
  color: var(--fg-primary);
  background-color: transparent;
}

.btn-outline-primary:hover {
  background-color: var(--fg-primary);
  border-color: var(--fg-primary);
  color: var(--fg-text-white);
}

.btn-outline-secondary {
  border-color: var(--fg-secondary);
  color: var(--fg-secondary);
  background-color: transparent;
}

.btn-outline-secondary:hover {
  background: var(--fg-secondary-gradient);
  border-color: var(--fg-secondary);
  color: var(--fg-text-white);
}

/* ========================================
   HEADER & NAVIGATION
   ======================================== */

/* Header Background */
.ul-header,
header {
  background-color: var(--fg-primary);
  border-bottom: 1px solid var(--fg-border-light);
}

/* Navigation Links */
.ul-header .nav-link,
header .nav-link {
  color: var(--fg-text-white);
  transition: color 0.3s ease;
}

.ul-header .nav-link:hover,
header .nav-link:hover {
  color: var(--fg-secondary-light);
}

/* Logo Area */
.ul-logo,
.logo {
  filter: brightness(0) invert(1); /* Make logo white on dark header */
}

/* ========================================
   FOOTER
   ======================================== */

.ul-footer,
footer {
  background-color: var(--fg-primary);
  color: var(--fg-text-white);
}

.ul-footer a,
footer a {
  color: var(--fg-text-white);
  transition: color 0.3s ease;
}

.ul-footer a:hover,
footer a:hover {
  color: var(--fg-secondary-light);
}

/* ========================================
   CARDS & CONTENT SECTIONS
   ======================================== */

.ul-card,
.card {
  background-color: var(--fg-bg-primary);
  border: 1px solid var(--fg-border-light);
  box-shadow: 0 2px 8px var(--fg-shadow-light);
  transition: all 0.3s ease;
}

.ul-card:hover,
.card:hover {
  box-shadow: 0 4px 16px var(--fg-shadow-medium);
  transform: translateY(-2px);
}

/* Content Sections */
.ul-section,
section {
  background-color: var(--fg-bg-primary);
}

.ul-section-alt,
.section-alt {
  background-color: var(--fg-bg-secondary);
}

/* ========================================
   FORMS
   ======================================== */

.form-control,
.ul-form-control {
  border-color: var(--fg-border-medium);
  color: var(--fg-text-primary);
  background-color: var(--fg-bg-primary);
  transition: all 0.3s ease;
}

.form-control:focus,
.ul-form-control:focus {
  border-color: var(--fg-secondary);
  box-shadow: 0 0 0 0.2rem rgba(255, 107, 53, 0.25);
  background-color: var(--fg-bg-primary);
}

.form-label,
.ul-form-label {
  color: var(--fg-text-primary);
  font-weight: 600;
}

/* ========================================
   PRICING & SPECIAL ELEMENTS
   ======================================== */

/* Price Display */
.ul-price,
.price {
  color: var(--fg-secondary);
  font-weight: 700;
}

.ul-price-old,
.price-old {
  color: var(--fg-text-secondary);
  text-decoration: line-through;
}

/* Discount Tags */
.ul-discount,
.discount {
  background: var(--ul-secondary);
  color: var(--fg-text-white);
  font-weight: 600;
}

/* ========================================
   STATUS INDICATORS
   ======================================== */

/* Success States */
.ul-success,
.success {
  color: var(--fg-success);
  background-color: var(--fg-success-light);
}

/* Error States */
.ul-error,
.error {
  color: var(--fg-error);
  background-color: var(--fg-error-light);
}

/* Warning States */
.ul-warning,
.warning {
  color: var(--fg-warning);
  background-color: var(--fg-warning-light);
}

/* ========================================
   SPECIAL COMPONENTS
   ======================================== */

/* Hero Section */
.ul-hero {
  background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-primary-light) 100%);
  color: var(--fg-text-white);
}

/* CTA Sections */
.ul-cta {
  background: var(--fg-secondary-gradient);
  color: var(--fg-text-white);
}

/* Testimonials */
.ul-testimonial {
  background-color: var(--fg-bg-secondary);
  border-left: 4px solid var(--fg-secondary);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
  .btn-primary,
  .btn-secondary,
  .ul-btn-primary,
  .ul-btn-secondary {
    padding: 12px 20px;
    font-size: 14px;
  }
  
  .ul-card,
  .card {
    margin-bottom: 20px;
  }
}

/* ========================================
   ANIMATION ENHANCEMENTS
   ======================================== */

/* Smooth transitions for all interactive elements */
.btn,
.ul-btn,
.card,
.ul-card,
.nav-link,
a {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Gold gradient animation for special elements */
@keyframes goldShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.ul-gold-shimmer {
  background: linear-gradient(45deg, var(--fg-secondary), var(--fg-secondary-light), var(--fg-secondary));
  background-size: 200% 200%;
  animation: goldShimmer 3s ease infinite;
}

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

.text-primary { color: var(--fg-text-primary) !important; }
.text-secondary { color: var(--fg-text-secondary) !important; }
.text-gold { color: var(--fg-secondary) !important; }
.text-success { color: var(--fg-success) !important; }
.text-error { color: var(--fg-error) !important; }
.text-warning { color: var(--fg-warning) !important; }

.bg-primary { background-color: var(--fg-primary) !important; }
.bg-secondary { background: var(--fg-secondary-gradient) !important; }
.bg-light { background-color: var(--fg-bg-secondary) !important; }
.bg-success { background-color: var(--fg-success-light) !important; }
.bg-error { background-color: var(--fg-error-light) !important; }
.bg-warning { background-color: var(--fg-warning-light) !important; }

.border-primary { border-color: var(--fg-primary) !important; }
.border-secondary { border-color: var(--fg-secondary) !important; }
.border-light { border-color: var(--fg-border-light) !important; }