/* Color System - La Esquina Del Combinado */

:root {
    /* Primary Colors - Vibrant Restaurant Theme */
    --primary-50: #ffe6e9;
    --primary-100: #f8ad9d;
    --primary-200: #f48c8c;
    --primary-300: #f16b6b;
    --primary-400: #ed4a4a;
    --primary-500: #e63946;
    --primary-600: #d32f2f;
    --primary-700: #c1121f;
    --primary-800: #a50e1a;
    --primary-900: #880b15;
    
    /* Secondary Colors - Tonos Azul Oscuro */
    --secondary-50: #e3eaf6;
    --secondary-100: #b3c6e2;
    --secondary-200: #7a9acb;
    --secondary-300: #4a6eb4;
    --secondary-400: #234a99;
    --secondary-500: #16367a;
    --secondary-600: #112a63;
    --secondary-700: #0d204b;
    --secondary-800: #091633;
    --secondary-900: #082463;
    
    /* Accent Colors - Warm & Inviting */
    --accent-50: #fff3e0;
    --accent-100: #ffe0b2;
    --accent-200: #ffcc80;
    --accent-300: #ffb74d;
    --accent-400: #ffa726;
    --accent-500: #f4a261;
    --accent-600: #e76f51;
    --accent-700: #e65100;
    --accent-800: #ef6c00;
    --accent-900: #e65100;
    
    /* Neutral Colors */
    --neutral-50: #f8f9fa;
    --neutral-100: #e9ecef;
    --neutral-200: #dee2e6;
    --neutral-300: #ced4da;
    --neutral-400: #adb5bd;
    --neutral-500: #6c757d;
    --neutral-600: #495057;
    --neutral-700: #343a40;
    --neutral-800: #212529;
    --neutral-900: #121417;
    
    /* Semantic Colors - Azul Oscuro */
    --success-50: #e3eaf6;
    --success-100: #b3c6e2;
    --success-200: #7a9acb;
    --success-300: #4a6eb4;
    --success-400: #234a99;
    --success-500: #16367a;
    --success-600: #112a63;
    --success-700: #0d204b;
    --success-800: #091633;
    --success-900: #082463;
    
    --warning-50: #fff8e1;
    --warning-100: #ffecb3;
    --warning-200: #ffe082;
    --warning-300: #ffd54f;
    --warning-400: #ffca28;
    --warning-500: #f4a261;
    --warning-600: #e76f51;
    --warning-700: #e65100;
    --warning-800: #ef6c00;
    --warning-900: #e65100;
    
    --error-50: #ffebee;
    --error-100: #ffcdd2;
    --error-200: #ef9a9a;
    --error-300: #e57373;
    --error-400: #ef5350;
    --error-500: #e63946;
    --error-600: #d32f2f;
    --error-700: #c1121f;
    --error-800: #a50e1a;
    --error-900: #880b15;
    
    /* Text Colors */
    --text-primary: var(--neutral-800);
    --text-secondary: var(--neutral-600);
    --text-tertiary: var(--neutral-500);
    --text-disabled: var(--neutral-400);
    --text-inverse: var(--neutral-50);
    
    /* Background Colors */
    --background-primary: var(--neutral-50);
    --background-secondary: var(--neutral-100);
    --background-tertiary: var(--neutral-200);
    --background-surface: #ffffff;
    --background-elevated: #ffffff;
    
    /* Border Colors */
    --border-primary: var(--neutral-200);
    --border-secondary: var(--neutral-300);
    --border-focus: var(--primary-500);
    --border-error: var(--error-500);
    
    /* Shadow Colors */
    --shadow-sm: 0 1px 2px rgba(38, 70, 83, 0.05);
    --shadow-md: 0 4px 6px rgba(38, 70, 83, 0.1);
    --shadow-lg: 0 10px 15px rgba(38, 70, 83, 0.1);
    --shadow-xl: 0 20px 25px rgba(38, 70, 83, 0.15);
    --shadow-2xl: 0 25px 50px rgba(38, 70, 83, 0.25);
    
    /* Gradient Definitions */
    --gradient-primary: linear-gradient(135deg, var(--primary-500), var(--accent-600));
    --gradient-secondary: linear-gradient(135deg, var(--secondary-500), var(--secondary-700));
    --gradient-accent: linear-gradient(135deg, var(--accent-500), var(--accent-700));
    --gradient-hero: linear-gradient(135deg, var(--secondary-900) 0%, var(--secondary-400) 100%);
    --gradient-dark: linear-gradient(135deg, var(--neutral-800) 0%, var(--neutral-900) 100%);
    --gradient-light: linear-gradient(135deg, var(--neutral-50) 0%, var(--neutral-100) 100%);
    
    /* Color Usage Aliases */
    --primary-color: var(--primary-500);
    --primary-dark: var(--primary-700);
    --primary-light: var(--primary-100);
    
    --secondary-color: var(--secondary-500);
    --secondary-dark: var(--secondary-700);
    --secondary-light: var(--secondary-100);
    
    --accent-color: var(--accent-500);
    --accent-dark: var(--accent-600);
    --accent-light: var(--accent-100);
    
    --success-color: var(--success-500);
    --warning-color: var(--warning-500);
    --error-color: var(--error-500);
    
    --text-dark: var(--neutral-800);
    --text-light: var(--neutral-600);
    --white: #ffffff;
    --black: var(--neutral-900);
    
    --light-bg:#fff9db;
    --light-gray: var(--neutral-200);
    --medium-gray: var(--neutral-400);
    
    --shadow: var(--shadow-lg);
    --shadow-lg: var(--shadow-xl);
}

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
    :root {
        --text-primary: var(--neutral-100);
        --text-secondary: var(--neutral-300);
        --text-tertiary: var(--neutral-400);
        
        --background-primary: var(--neutral-900);
        --background-secondary: var(--neutral-800);
        --background-tertiary: var(--neutral-700);
        --background-surface: var(--neutral-800);
        --background-elevated: var(--neutral-700);
        
        --border-primary: var(--neutral-700);
        --border-secondary: var(--neutral-600);
    }
}

/* Color Utility Classes */
.bg-primary { background-color: var(--primary-color); }
.bg-primary-dark { background-color: var(--primary-dark); }
.bg-primary-light { background-color: var(--primary-light); }

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

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

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

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

/* Gradient Utility Classes */
.gradient-primary { background: var(--gradient-primary); }
.gradient-secondary { background: var(--gradient-secondary); }
.gradient-accent { background: var(--gradient-accent); }
.gradient-hero { background: var(--gradient-hero); }
.gradient-dark { background: var(--gradient-dark); }
.gradient-light { background: var(--gradient-light); }