/* ============================================================================
   UNIVERSAL COLOR SYSTEM - Consistent Colors Across All Views
   ============================================================================ */

/* Color Palette Definitions */
:root {
    /* Primary Colors — change these two lines to retheme the entire app */
    --color-primary-main:  #d97706;
    --color-primary-light: #f59e0b;
    --color-primary-dark:  #b45309;
    --color-primary-pale:  #fef3c7;
    --color-primary-bg:    #fffbeb;

    /* Secondary Colors */
    --color-secondary-main:  #d97706;
    --color-secondary-light: #f59e0b;
    --color-secondary-dark:  #b45309;
    --color-secondary-pale:  #fef3c7;
    --color-secondary-bg:    #fffbeb;

    /* Accent Colors */
    --color-accent-orange:       #d97706;
    --color-accent-gold:         #f59e0b;
    --color-accent-light-orange: #f59e0b;
    --color-accent-brown:        #92400e;
    --color-accent-warm:         #fde68a;

    /* Neutral Colors */
    --color-neutral-white: #ffffff;
    --color-neutral-light: #f8f9fa;
    --color-neutral-lighter: #f0f0f0;
    --color-neutral-lightest: #fafafa;
    --color-neutral-gray-100: #f8f9fa;
    --color-neutral-gray-200: #e9ecef;
    --color-neutral-gray-300: #dee2e6;
    --color-neutral-gray-400: #ced4da;
    --color-neutral-gray-500: #adb5bd;
    --color-neutral-gray-600: #6c757d;
    --color-neutral-gray-700: #495057;
    --color-neutral-gray-800: #343a40;
    --color-neutral-gray-900: #212529;
    --color-neutral-black: #000000;

    /* Text Colors */
    --color-text-primary: #212529;
    --color-text-secondary: #495057;
    --color-text-tertiary: #6c757d;
    --color-text-quaternary: #999999;
    --color-text-light: #999;
    --color-text-lighter: #aaa;
    --color-text-inverse: #ffffff;

    /* Background Colors */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8f9fa;
    --color-bg-tertiary: #f0f0f0;
    --color-bg-overlay: rgba(255, 255, 255, 0.6);
    --color-bg-glass: rgba(255, 255, 255, 0.72);
    --color-bg-glass-light: rgba(255, 255, 255, 0.8);

    /* Border Colors */
    --color-border-light: #f0f0f0;
    --color-border-normal: #e9ecef;
    --color-border-dark: #dee2e6;
    --color-border-glass: rgba(255, 255, 255, 0.3);
    --color-border-glass-light: rgba(255, 255, 255, 0.2);

    /* Shadow Colors */
    --color-shadow-light: rgba(0, 0, 0, 0.04);
    --color-shadow-normal: rgba(0, 0, 0, 0.06);
    --color-shadow-dark: rgba(0, 0, 0, 0.1);
    --color-shadow-primary:   rgba(212, 165, 116, 0.22);
    --color-shadow-secondary: rgba(212, 165, 116, 0.14);

    /* Status Colors */
    --color-success: #16a34a;
    --color-warning: #f59e0b;
    --color-error:   #dc2626;
    --color-info:    #0284c7;

    /* Gradient Colors */
    --color-gradient-primary:   linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    --color-gradient-secondary: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --color-gradient-light:     linear-gradient(135deg, rgba(217,119,6,0.1), rgba(245,158,11,0.06));
    --color-gradient-glass:     linear-gradient(135deg, rgba(255,255,255,0.4), transparent);

    /* Transparency Levels */
    --opacity-lowest: 0.05;
    --opacity-low: 0.1;
    --opacity-medium: 0.15;
    --opacity-high: 0.2;
    --opacity-higher: 0.25;
    --opacity-highest: 0.3;
}

/* Typography & Component Color Mapping */

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

h1 { color: var(--color-text-primary); }
h2, h3 { color: var(--color-text-primary); }
h4, h5, h6 { color: var(--color-text-secondary); }

/* Text Elements */
p { color: var(--color-text-secondary); }
a { color: #d4a574; }
a:hover { color: #c4956f; }
small, .text-muted { color: var(--color-text-tertiary); }
label { color: var(--color-text-primary); }

/* Buttons - Default */
button, .btn {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-normal);
    transition: all 0.3s ease;
}

button:hover, .btn:hover {
    background: var(--color-neutral-white);
    border-color: var(--color-secondary-main);
    color: var(--color-secondary-main);
}

/* Buttons - Primary */
button.primary, .btn.primary, .btn-primary {
    background: linear-gradient(135deg, #d4a574 0%, #c4956f 100%);
    color: var(--color-text-inverse);
    border: none;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.25);
}

button.primary:hover, .btn.primary:hover, .btn-primary:hover {
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.35);
    transform: translateY(-2px);
}

/* Buttons - Secondary */
button.secondary, .btn.secondary, .btn-secondary {
    background: var(--color-gradient-secondary);
    color: var(--color-text-inverse);
    border: none;
    box-shadow: 0 4px 12px rgba(212, 165, 116, 0.25);
}

button.secondary:hover, .btn.secondary:hover, .btn-secondary:hover {
    box-shadow: 0 6px 16px rgba(212, 165, 116, 0.35);
    transform: translateY(-2px);
}

/* Form Elements */
input, textarea, select {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-normal);
}

input:focus, textarea:focus, select:focus {
    border-color: var(--color-secondary-main);
    box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.1);
}

input::placeholder {
    color: var(--color-text-lighter);
}

/* Cards */
.card, [class*="card"] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-normal);
    color: var(--color-text-primary);
}

.card:hover, [class*="card"]:hover {
    border-color: var(--color-secondary-main);
    box-shadow: 0 4px 12px var(--color-shadow-secondary);
}

/* Glass Cards */
.glass-card, .glass-menu, .glass-panel {
    background: var(--color-bg-glass);
    border: 1px solid var(--color-border-glass);
}

.glass-card:hover, .glass-menu:hover, .glass-panel:hover {
    background: var(--color-bg-glass-light);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Badges */
.badge, [class*="badge"] {

    color: var(--color-text-inverse);
}

.badge.secondary, .badge-secondary {
    background: var(--color-secondary-main);
}

.badge.success {
    background: var(--color-success);
}

.badge.warning {
    background: var(--color-warning);
}

.badge.error {
    background: var(--color-error);
}

/* Navigation */
nav, .nav {
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border-normal);
}

.nav-item, .nav-link {
    color: var(--color-text-secondary);
    transition: all 0.3s ease;
}

.nav-item:hover, .nav-link:hover {
    color: #d4a574;
}



/* Icons */
.icon {
    color: var(--color-text-secondary);
}

.icon.primary {
    color: #d4a574;
}

.icon.secondary {
    color: var(--color-secondary-main);
}

.icon.success {
    color: var(--color-success);
}

.icon.warning {
    color: var(--color-warning);
}

.icon.error {
    color: var(--color-error);
}

/* Category Items */
.category-item {
    background: var(--color-bg-glass);
    border: 1px solid var(--color-border-glass);
    color: var(--color-text-primary);
}

.category-item:hover {
    background: var(--color-bg-glass-light);
    border-color: rgba(212, 165, 116, 0.40);
}

.category-item.active {
    background: linear-gradient(135deg, #d4a574 0%, #c4956f 100%);
    border-color: #d4a574;
    color: var(--color-text-inverse);
}

.category-icon {
    background: var(--color-neutral-white);
    color: var(--color-secondary-main);
}

.category-item.active .category-icon {
    background: white;
    color: #d4a574;
}

/* Filter Pills */
.filter-pill {
    background: var(--color-bg-glass);
    border: 1px solid var(--color-border-glass);
    color: var(--color-text-secondary);
}

.filter-pill:hover {
    border-color: rgba(212, 165, 116, 0.40);
    background: var(--color-bg-glass-light);
}

.filter-pill.active {
    background: linear-gradient(135deg, #d4a574 0%, #c4956f 100%);
    color: var(--color-text-inverse);
    border-color: #d4a574;
}

/* Links & Anchors */
.link {
    color: var(--color-secondary-main);
    text-decoration: none;
    transition: all 0.3s ease;
}

.link:hover {
    color: #d4a574;
}

.link.active {
    color: #d4a574;
    font-weight: 600;
}

/* Dividers */
.divider, hr {
    border-color: var(--color-border-normal);
}

.divider.light {
    border-color: var(--color-border-light);
}

.divider.dark {
    border-color: var(--color-border-dark);
}

/* Alert/Toast Colors */
.alert, .toast {
    border-left: 4px solid #d4a574;
    background: var(--color-primary-bg);
    color: var(--color-text-primary);
}

.alert.success {
    border-left-color: var(--color-success);
    background: rgba(40, 167, 69, 0.1);
}

.alert.warning {
    border-left-color: var(--color-warning);
    background: rgba(255, 193, 7, 0.1);
}

.alert.error {
    border-left-color: var(--color-error);
    background: rgba(220, 53, 69, 0.1);
}

/* Shadows */
.shadow-light {
    box-shadow: 0 2px 8px var(--color-shadow-light);
}

.shadow-normal {
    box-shadow: 0 4px 12px var(--color-shadow-normal);
}

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

.shadow-primary {
    box-shadow: 0 4px 16px var(--color-shadow-primary);
}

.shadow-secondary {
    box-shadow: 0 4px 12px var(--color-shadow-secondary);
}

/* Backgrounds */
.bg-primary {
    background-color: #d4a574;
    color: var(--color-text-inverse);
}

.bg-secondary {
    background-color: var(--color-secondary-main);
    color: var(--color-text-inverse);
}

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

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

.bg-glass {
    background: var(--color-bg-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Text Colors as Utilities */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-light { color: var(--color-text-light); }
.text-lighter { color: var(--color-text-lighter); }
.text-inverse { color: var(--color-text-inverse); }

.text-accent { color: #d4a574; }
.text-accent-secondary { color: var(--color-secondary-main); }

/* Product/Menu Items */
.product-item, .menu-item {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-normal);
    color: var(--color-text-primary);
}

.product-item:hover, .menu-item:hover {
    border-color: var(--color-secondary-main);
    box-shadow: 0 4px 16px var(--color-shadow-secondary);
}

/* Variant Options */
.variant-option {
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-border-normal);
}

.variant-option:hover {
    background: var(--color-bg-primary);
    border-color: var(--color-secondary-main);
}

.variant-option:has(input:checked) {
    border-color: var(--color-secondary-main);
    background: var(--color-bg-primary);
    box-shadow: 0 2px 12px var(--color-shadow-secondary);
}

/* Price Tags */
.price, .price-tag {
    color: var(--color-secondary-main);
    font-weight: 700;
}


/* Print Styles */
@media print {
    * {
        background: transparent !important;
        box-shadow: none !important;
    }

    a, a:visited {
        color: #d4a574;
    }
}