/* ========================================
   Gift & Give Professional Color Schema
   ======================================== */

/* CSS Variables - Core Brand Palette */
:root {
    /* ===== BRAND COLORS ===== */
    --brand-orange: #FF6B35;
    --brand-orange-dark: #E06600;
    --brand-orange-light: #FF8E53;
    --brand-yellow: #F7931E;
    --brand-yellow-light: #FFB347;
    --brand-yellow-dark: #D68910;

    /* ===== SEMANTIC COLORS ===== */
    /* Success Colors */
    --success-primary: #28A745;
    --success-light: #58D68D;
    --success-dark: #1E7E34;
    
    /* Warning Colors */
    --warning-primary: #FFC107;
    --warning-light: #FFD54F;
    --warning-dark: #E0A800;
    
    /* Error Colors */
    --error-primary: #DC3545;
    --error-light: #F1948A;
    --error-dark: #C82333;
    
    /* Info Colors */
    --info-primary: #17A2B8;
    --info-light: #7FB3D3;
    --info-dark: #138496;

    /* ===== TYPOGRAPHY COLORS ===== */
    --text-primary: #2C3E50;
    --text-secondary: #6C757D;
    --text-muted: #495057;
    --text-light: #ADB5BD;
    
    /* Link Colors */
    --link-primary: #FF6B35;
    --link-hover: #E06600;
    --link-visited: #D68910;

    /* ===== BACKGROUND COLORS ===== */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8F9FA;
    --bg-tertiary: #E9ECEF;
    
    /* ===== BORDER COLORS ===== */
    --border-primary: #E9ECEF;
    --border-secondary: #DEE2E6;
    --border-focus: #FF6B35;

    /* ===== CATEGORY COLORS ===== */
    /* Food Categories */
    --category-northern-primary: #FF6B35;
    --category-northern-secondary: #FF8E53;
    --category-northern-tertiary: #E06600;
    
    --category-isaan-primary: #FF4757;
    --category-isaan-secondary: #FF6B7A;
    --category-isaan-tertiary: #E63946;
    
    --category-thai-primary: #9B59B6;
    --category-thai-secondary: #BB8FCE;
    --category-thai-tertiary: #8E44AD;
    
    --category-international-primary: #E74C3C;
    --category-international-secondary: #F1948A;
    --category-international-tertiary: #C0392B;

    /* Beverage Categories */
    --category-coffee-primary: #D68910;
    --category-coffee-secondary: #E67E22;
    --category-coffee-tertiary: #B7950B;
    
    --category-drinks-primary: #17A2B8;
    --category-drinks-secondary: #7FB3D3;
    --category-drinks-tertiary: #138496;

    /* Service Categories */
    --category-buffet-primary: #28A745;
    --category-buffet-secondary: #58D68D;
    --category-buffet-tertiary: #1E7E34;
    
    --category-hotel-primary: #17A2B8;
    --category-hotel-secondary: #7FB3D3;
    --category-hotel-tertiary: #138496;
    
    --category-dessert-primary: #E91E63;
    --category-dessert-secondary: #F48FB1;
    --category-dessert-tertiary: #C2185B;
    
    --category-bakery-primary: #FF9800;
    --category-bakery-secondary: #FFB74D;
    --category-bakery-tertiary: #E68900;

    /* Restaurant Categories */
    --category-restaurant-primary: #FF6B35;
    --category-restaurant-secondary: #FFD166;
    --category-agriculture-primary: #43A047;
    --category-agriculture-secondary: #A8E063;
    --category-processed-primary: #6A11CB;
    --category-processed-secondary: #2575FC;
    --category-retail-primary: #FFB347;
    --category-retail-secondary: #FFCC33;
    --category-other-primary: #BDBDBD;
    --category-other-secondary: #757575;

    /* ===== EFFECTS & SPACING ===== */
    --border-radius: 12px;
    --border-radius-sm: 8px;
    --border-radius-lg: 16px;
    --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --box-shadow-hover: 0 8px 25px rgba(255, 107, 53, 0.15);
    --box-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.15);
    --transition: all 0.3s ease;
    --transition-fast: all 0.15s ease;
}

/* ========================================
   UTILITY CLASSES - BACKGROUND COLORS
   ======================================== */

/* Brand Background Colors */
.bg-brand-orange { background-color: var(--brand-orange) !important; }
.bg-brand-orange-dark { background-color: var(--brand-orange-dark) !important; }
.bg-brand-orange-light { background-color: var(--brand-orange-light) !important; }
.bg-brand-yellow { background-color: var(--brand-yellow) !important; }
.bg-brand-yellow-light { background-color: var(--brand-yellow-light) !important; }
.bg-brand-yellow-dark { background-color: var(--brand-yellow-dark) !important; }

/* Semantic Background Colors */
.bg-success { background-color: var(--success-primary) !important; }
.bg-success-light { background-color: var(--success-light) !important; }
.bg-success-dark { background-color: var(--success-dark) !important; }

.bg-warning { background-color: var(--warning-primary) !important; }
.bg-warning-light { background-color: var(--warning-light) !important; }
.bg-warning-dark { background-color: var(--warning-dark) !important; }

.bg-error { background-color: var(--error-primary) !important; }
.bg-error-light { background-color: var(--error-light) !important; }
.bg-error-dark { background-color: var(--error-dark) !important; }

.bg-info { background-color: var(--info-primary) !important; }
.bg-info-light { background-color: var(--info-light) !important; }
.bg-info-dark { background-color: var(--info-dark) !important; }

/* Surface Background Colors */
.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-tertiary { background-color: var(--bg-tertiary) !important; }

/* ========================================
   UTILITY CLASSES - TEXT COLORS
   ======================================== */

/* Brand Text Colors */
.text-brand-orange { color: var(--brand-orange) !important; }
.text-brand-orange-dark { color: var(--brand-orange-dark) !important; }
.text-brand-orange-light { color: var(--brand-orange-light) !important; }
.text-brand-yellow { color: var(--brand-yellow) !important; }
.text-brand-yellow-light { color: var(--brand-yellow-light) !important; }
.text-brand-yellow-dark { color: var(--brand-yellow-dark) !important; }

/* Semantic Text Colors */
.text-success { color: var(--success-primary) !important; }
.text-success-light { color: var(--success-light) !important; }
.text-success-dark { color: var(--success-dark) !important; }

.text-warning { color: var(--warning-primary) !important; }
.text-warning-light { color: var(--warning-light) !important; }
.text-warning-dark { color: var(--warning-dark) !important; }

.text-error { color: var(--error-primary) !important; }
.text-error-light { color: var(--error-light) !important; }
.text-error-dark { color: var(--error-dark) !important; }

.text-info { color: var(--info-primary) !important; }
.text-info-light { color: var(--info-light) !important; }
.text-info-dark { color: var(--info-dark) !important; }

/* Typography Text Colors */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-light { color: var(--text-light) !important; }

/* Link Text Colors */
.text-link { color: var(--link-primary) !important; }
.text-link-hover { color: var(--link-hover) !important; }
.text-link-visited { color: var(--link-visited) !important; }

/* ========================================
   UTILITY CLASSES - BORDER COLORS
   ======================================== */

/* Brand Border Colors */
.border-brand-orange { border-color: var(--brand-orange) !important; }
.border-brand-orange-dark { border-color: var(--brand-orange-dark) !important; }
.border-brand-orange-light { border-color: var(--brand-orange-light) !important; }
.border-brand-yellow { border-color: var(--brand-yellow) !important; }
.border-brand-yellow-light { border-color: var(--brand-yellow-light) !important; }
.border-brand-yellow-dark { border-color: var(--brand-yellow-dark) !important; }

/* Semantic Border Colors */
.border-success { border-color: var(--success-primary) !important; }
.border-success-light { border-color: var(--success-light) !important; }
.border-success-dark { border-color: var(--success-dark) !important; }

.border-warning { border-color: var(--warning-primary) !important; }
.border-warning-light { border-color: var(--warning-light) !important; }
.border-warning-dark { border-color: var(--warning-dark) !important; }

.border-error { border-color: var(--error-primary) !important; }
.border-error-light { border-color: var(--error-light) !important; }
.border-error-dark { border-color: var(--error-dark) !important; }

.border-info { border-color: var(--info-primary) !important; }
.border-info-light { border-color: var(--info-light) !important; }
.border-info-dark { border-color: var(--info-dark) !important; }

/* Standard Border Colors */
.border-primary { border-color: var(--border-primary) !important; }
.border-secondary { border-color: var(--border-secondary) !important; }
.border-focus { border-color: var(--border-focus) !important; }

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

/* Brand Gradients */
.gradient-brand-primary {
    background: linear-gradient(135deg, var(--brand-orange), var(--brand-yellow)) !important;
}

.gradient-brand-secondary {
    background: linear-gradient(135deg, var(--brand-orange-light), var(--brand-yellow-light)) !important;
}

.gradient-brand-accent {
    background: linear-gradient(135deg, #FFD899, #FEAC55) !important;
}

/* Semantic Gradients */
.gradient-success {
    background: linear-gradient(135deg, var(--success-primary), var(--success-light)) !important;
}

.gradient-warning {
    background: linear-gradient(135deg, var(--warning-primary), var(--warning-light)) !important;
}

.gradient-error {
    background: linear-gradient(135deg, var(--error-primary), var(--error-light)) !important;
}

.gradient-info {
    background: linear-gradient(135deg, var(--info-primary), var(--info-light)) !important;
}

/* Category Gradients */
.gradient-category-northern {
    background: linear-gradient(135deg, var(--category-northern-primary), var(--category-northern-secondary)) !important;
}

.gradient-category-isaan {
    background: linear-gradient(135deg, var(--category-isaan-primary), var(--category-isaan-secondary)) !important;
}

.gradient-category-coffee {
    background: linear-gradient(135deg, var(--category-coffee-primary), var(--category-coffee-secondary)) !important;
}

.gradient-category-buffet {
    background: linear-gradient(135deg, var(--category-buffet-primary), var(--category-buffet-secondary)) !important;
}

.gradient-category-hotel {
    background: linear-gradient(135deg, var(--category-hotel-primary), var(--category-hotel-secondary)) !important;
}

.gradient-category-dessert {
    background: linear-gradient(135deg, var(--category-dessert-primary), var(--category-dessert-secondary)) !important;
}

.gradient-category-bakery {
    background: linear-gradient(135deg, var(--category-bakery-primary), var(--category-bakery-secondary)) !important;
}

.gradient-category-restaurant {
    background: linear-gradient(135deg, var(--category-restaurant-primary), var(--category-restaurant-secondary)) !important;
}

.gradient-category-agriculture {
    background: linear-gradient(135deg, var(--category-agriculture-primary), var(--category-agriculture-secondary)) !important;
}

.gradient-category-processed {
    background: linear-gradient(135deg, var(--category-processed-primary), var(--category-processed-secondary)) !important;
}

.gradient-category-retail {
    background: linear-gradient(135deg, var(--category-retail-primary), var(--category-retail-secondary)) !important;
}

.gradient-category-other {
    background: linear-gradient(135deg, var(--category-other-primary), var(--category-other-secondary)) !important;
}

/* Background Gradients */
.gradient-bg-section {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary)) !important;
}

.gradient-bg-card {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary)) !important;
}

.gradient-bg-hero {
    background: linear-gradient(135deg, var(--brand-orange), var(--brand-yellow)) !important;
}

/* ========================================
   COMPONENT STYLES - BUTTONS
   ======================================== */

/* Primary Button */
.btn-brand-primary {
    background: linear-gradient(135deg, var(--brand-orange), var(--brand-yellow));
    color: white;
    border: none;
    border-radius: var(--border-radius);
    padding: 12px 24px;
    font-weight: 600;
    transition: var(--transition);
    box-shadow: var(--box-shadow);
}

.btn-brand-primary:hover {
    background: linear-gradient(135deg, var(--brand-orange-dark), var(--brand-yellow-dark));
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-hover);
    color: white;
}

/* Secondary Button */
.btn-brand-secondary {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 2px solid var(--border-primary);
    border-radius: var(--border-radius);
    padding: 12px 24px;
    font-weight: 600;
    transition: var(--transition);
}

.btn-brand-secondary:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-secondary);
    transform: translateY(-2px);
}

/* Success Button */
.btn-success {
    background: linear-gradient(135deg, var(--success-primary), var(--success-light));
    color: white;
    border: none;
    border-radius: var(--border-radius);
    padding: 12px 24px;
    font-weight: 600;
    transition: var(--transition);
}

.btn-success:hover {
    background: linear-gradient(135deg, var(--success-dark), var(--success-primary));
    color: white;
    transform: translateY(-2px);
}

/* Warning Button */
.btn-warning {
    background: linear-gradient(135deg, var(--warning-primary), var(--warning-light));
    color: var(--text-primary);
    border: none;
    border-radius: var(--border-radius);
    padding: 12px 24px;
    font-weight: 600;
    transition: var(--transition);
}

.btn-warning:hover {
    background: linear-gradient(135deg, var(--warning-dark), var(--warning-primary));
    color: var(--text-primary);
    transform: translateY(-2px);
}

/* Error Button */
.btn-error {
    background: linear-gradient(135deg, var(--error-primary), var(--error-light));
    color: white;
    border: none;
    border-radius: var(--border-radius);
    padding: 12px 24px;
    font-weight: 600;
    transition: var(--transition);
}

.btn-error:hover {
    background: linear-gradient(135deg, var(--error-dark), var(--error-primary));
    color: white;
    transform: translateY(-2px);
}

/* ========================================
   COMPONENT STYLES - CARDS
   ======================================== */

/* Primary Card */
.card-brand-primary {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    overflow: hidden;
}

.card-brand-primary:hover {
    box-shadow: var(--box-shadow-hover);
    transform: translateY(-4px);
}

/* Category Card */
.card-category {
    background: linear-gradient(135deg, var(--category-northern-primary), var(--category-northern-secondary));
    color: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-card);
    transition: var(--transition);
    overflow: hidden;
    position: relative;
}

.card-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: var(--transition);
}

.card-category:hover::before {
    opacity: 1;
}

.card-category:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

/* Shop Card */
.card-shop {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius);
    transition: var(--transition);
    overflow: hidden;
    cursor: pointer;
}

.card-shop:hover {
    box-shadow: var(--box-shadow-hover);
    transform: translateY(-4px);
    border-color: var(--brand-orange);
}

/* ========================================
   COMPONENT STYLES - FORMS
   ======================================== */

/* Input Fields */
.form-control-brand {
    background: var(--bg-primary);
    border: 2px solid var(--border-primary);
    color: var(--text-primary);
    border-radius: var(--border-radius-sm);
    padding: 12px 16px;
    transition: var(--transition);
}

.form-control-brand:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 0.2rem rgba(255, 107, 53, 0.25);
    outline: none;
}

.form-control-brand::placeholder {
    color: var(--text-light);
}

/* Form Labels */
.form-label-brand {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 8px;
}

/* Form Help Text */
.form-text-brand {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-top: 4px;
}

/* Form Validation */
.form-control-brand.is-valid {
    border-color: var(--success-primary);
}

.form-control-brand.is-invalid {
    border-color: var(--error-primary);
}

/* ========================================
   UTILITY CLASSES - EFFECTS
   ======================================== */

/* Shadows */
.shadow-brand { box-shadow: var(--box-shadow) !important; }
.shadow-brand-hover { box-shadow: var(--box-shadow-hover) !important; }
.shadow-card { box-shadow: var(--box-shadow-card) !important; }

/* Border Radius */
.rounded-brand { border-radius: var(--border-radius) !important; }
.rounded-brand-sm { border-radius: var(--border-radius-sm) !important; }
.rounded-brand-lg { border-radius: var(--border-radius-lg) !important; }

/* Transitions */
.transition-brand { transition: var(--transition) !important; }
.transition-fast { transition: var(--transition-fast) !important; }

/* ========================================
   COMPONENT STYLES - BREADCRUMB
   ======================================== */

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

@media (max-width: 768px) {
    /* Mobile-specific color adjustments for better visibility */
    .card-category {
        background: linear-gradient(135deg, var(--category-northern-tertiary), var(--category-northern-primary));
    }
    
    .btn-brand-primary {
        background: linear-gradient(135deg, var(--brand-orange-dark), var(--brand-yellow-dark));
    }
    
    .gradient-brand-primary {
        background: linear-gradient(135deg, var(--brand-orange-dark), var(--brand-yellow-dark)) !important;
    }
}

/* ========================================
   DARK MODE SUPPORT (Future)
   ======================================== */

[data-theme="dark"] {
    --bg-primary: #1A1A1A;
    --bg-secondary: #2D2D2D;
    --bg-tertiary: #404040;
    --text-primary: #FFFFFF;
    --text-secondary: #CCCCCC;
    --text-muted: #AAAAAA;
    --border-primary: #404040;
    --border-secondary: #555555;
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Focus indicators */
.btn-brand-primary:focus,
.btn-brand-secondary:focus,
.form-control-brand:focus {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn-brand-primary,
    .btn-success,
    .btn-error {
        border: 2px solid currentColor;
    }
    
    .card-brand-primary,
    .card-shop {
        border: 2px solid var(--border-primary);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .btn-brand-primary,
    .btn-brand-secondary,
    .card-brand-primary,
    .card-category,
    .card-shop {
        transition: none;
    }
    
    .btn-brand-primary:hover,
    .btn-brand-secondary:hover,
    .card-brand-primary:hover,
    .card-category:hover,
    .card-shop:hover {
        transform: none;
    }
}