/* TTMenus Color System - New Color Scheme */

:root {
    /* Primary Brand Colors */
    --primary-red: #cd2e57;
    --primary-red-dark: #ba1d45;
    --primary-red-light: #e85d7a;
    --primary-orange: #e5ad36;
    --primary-orange-light: #f0c066;
    --primary-orange-dark: #d19b2e;
    --primary-purple: #ecb5d1;
    --primary-purple-light: #f0c8e0;
    --primary-purple-dark: #d89bc8;
    --primary-blue: #313446;
    --primary-blue-dark: #090a13;
    --primary-blue-light: #4a4f5f;
    --primary-green: #28a745;
    --primary-green-dark: #1e7e34;
    --primary-green-light: #34ce57;
    --primary-yellow: #e5ad36;
    --primary-yellow-light: #f0c066;
    --primary-yellow-dark: #d19b2e;
    --primary-cyan: #17a2b8;
    --primary-cyan-light: #20c997;
    --primary-cyan-dark: #138496;
    --primary-glow: #fcfbf9;
    
    /* Secondary Colors */
    --secondary-blue: #313446;
    --secondary-blue-dark: #090a13;
    --secondary-pink: #ecb5d1;
    
    /* Neutral Colors */
    --white: #ffffff;
    --white-off: #fcfbf9;
    --black: #000000;
    --gray-light: #f4f4f4;
    --gray: #9ca3af;
    --gray-medium: #6b7280;
    --gray-dark: #374151;
    
    /* Background Colors */
    --bg-primary: var(--primary-blue-dark);
    --bg-secondary: var(--primary-blue);
    --bg-accent: var(--primary-purple);
    --bg-surface: var(--gray-light);
    
    /* Text Colors */
    --text-primary: var(--primary-blue-dark);
    --text-secondary: var(--primary-blue);
    --text-light: var(--white-off);
    --text-muted: var(--gray);
    
    /* Border Colors */
    --border-light: rgba(236, 181, 221, 0.2);
    --border-medium: rgba(49, 52, 70, 0.1);
    --border-dark: rgba(9, 10, 19, 0.2);
    
    /* Shadow Colors */
    --shadow-light: rgba(9, 10, 19, 0.1);
    --shadow-medium: rgba(9, 10, 19, 0.15);
    --shadow-dark: rgba(9, 10, 19, 0.2);
    
    /* Status Colors */
    --success: var(--primary-green);
    --warning: var(--primary-orange);
    --error: var(--primary-red);
    --info: var(--primary-blue);
    
    /* Icon Filters */
    --icon-filter: none;
    
    /* Glassmorphism */
    --glass-bg: rgba(252, 251, 249, 0.3);
    --glass-border: rgba(49, 52, 70, 0.2);
    --glass-blur: 20px;
    --glass-light: rgba(252, 251, 249, 0.05);
    --glass-bg-hover: rgba(252, 251, 249, 0.4);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--primary-blue) 75%, var(#138496) 100%);
    --gradient-primary: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--primary-blue) 75%, var(--primary-cyan-dark) 100%);
    --gradient-purple: linear-gradient(135deg, var(--white) 0%, var(--primary-purple) 50%, var(--primary-purple-light) 100%);
    --gradient-red-orange: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-orange) 100%);
    --gradient-orange-purple: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-purple) 50%, var(--primary-purple-light) 100%);
    
    /* Additional Gradient Variants */
    --gradient-dark: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--primary-blue) 100%);
    --gradient-warm: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-orange) 50%, var(--primary-purple) 100%);
    --gradient-cool: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 50%, var(--primary-red) 100%);
    --gradient-yellow: linear-gradient(135deg, var(--primary-yellow) 0%, var(--primary-orange) 100%);
    
    /* Light Gradient Variants */
    --gradient-primary-light: linear-gradient(135deg, var(--primary-blue-light) 0%, var(--primary-blue) 75%, var(--white) 100%);
    --gradient-secondary-light: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 50%, var(--primary-purple-light) 100%);
    --gradient-purple-light: linear-gradient(135deg, var(--white) 0%, var(--primary-purple-light) 50%, var(--white) 100%);
    --gradient-red-orange-light: linear-gradient(135deg, var(--primary-red-light) 0%, var(--primary-orange-light) 100%);
    --gradient-orange-purple-light: linear-gradient(135deg, var(--primary-orange-light) 0%, var(--primary-purple-light) 50%, var(--white) 100%);
    --gradient-dark-light: linear-gradient(135deg, var(--primary-blue-light) 0%, var(--primary-blue) 100%);
    --gradient-warm-light: linear-gradient(135deg, var(--primary-red-light) 0%, var(--primary-orange-light) 50%, var(--primary-purple-light) 100%);
    --gradient-cool-light: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 50%, var(--primary-red-light) 100%);
    --gradient-yellow-light: linear-gradient(135deg, var(--primary-yellow-light) 0%, var(--primary-orange-light) 100%);
    
    /* Dark Gradient Variants */
    --gradient-primary-dark: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--black) 75%, var(--primary-blue-dark) 100%);
    --gradient-secondary-dark: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--black) 50%, var(--primary-purple-dark) 100%);
    --gradient-purple-dark: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--primary-purple-dark) 50%, var(--black) 100%);
    --gradient-red-orange-dark: linear-gradient(135deg, var(--primary-red-dark) 0%, var(--primary-orange-dark) 100%);
    --gradient-orange-purple-dark: linear-gradient(135deg, var(--primary-orange-dark) 0%, var(--primary-purple-dark) 50%, var(--black) 100%);
    --gradient-dark-dark: linear-gradient(135deg, var(--black) 0%, var(--primary-blue-dark) 100%);
    --gradient-warm-dark: linear-gradient(135deg, var(--primary-red-dark) 0%, var(--primary-orange-dark) 50%, var(--primary-purple-dark) 100%);
    --gradient-cool-dark: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--black) 50%, var(--primary-red-dark) 100%);
    --gradient-yellow-dark: linear-gradient(135deg, var(--primary-yellow-dark) 0%, var(--primary-orange-dark) 100%);
    
    /* Simple Solid Color Fallbacks */
    --gradient-primary-fallback: var(--primary-red);
    --gradient-secondary-fallback: var(--primary-blue);
    --gradient-purple-fallback: var(--primary-purple);
    --gradient-yellow-fallback: var(--primary-yellow);
    
    /* Light Gradient Fallbacks */
    --gradient-primary-light-fallback: var(--primary-blue-light);
    --gradient-secondary-light-fallback: var(--primary-blue);
    --gradient-purple-light-fallback: var(--primary-purple-light);
    --gradient-red-orange-light-fallback: var(--primary-red-light);
    --gradient-orange-purple-light-fallback: var(--primary-orange-light);
    --gradient-dark-light-fallback: var(--primary-blue-light);
    --gradient-warm-light-fallback: var(--primary-red-light);
    --gradient-cool-light-fallback: var(--primary-blue);
    --gradient-yellow-light-fallback: var(--primary-yellow-light);
    
    /* Dark Gradient Fallbacks */
    --gradient-primary-dark-fallback: var(--primary-blue-dark);
    --gradient-secondary-dark-fallback: var(--primary-blue-dark);
    --gradient-purple-dark-fallback: var(--primary-purple-dark);
    --gradient-red-orange-dark-fallback: var(--primary-red-dark);
    --gradient-orange-purple-dark-fallback: var(--primary-orange-dark);
    --gradient-dark-dark-fallback: var(--black);
    --gradient-warm-dark-fallback: var(--primary-red-dark);
    --gradient-cool-dark-fallback: var(--primary-blue-dark);
    --gradient-yellow-dark-fallback: var(--primary-yellow-dark);
    
    /* Main Background */
    --main-bg: var(--gray-light);
    
    /* Additional commonly used colors */
    --bg-white: var(--white-off);
    --bg-light-gray: var(--gray-light);
    --text-dark: var(--primary-blue-dark);
    --text-darker: var(--primary-blue-dark);
    --border-gray: var(--gray-light);
    --border-light-gray: var(--gray-light);
    --shadow-black: rgba(9, 10, 19, 0.1);
    --shadow-black-55: rgba(9, 10, 19, 0.55);
    --bg-black: var(--primary-blue-dark);
    --bg-black-transparent: rgba(9, 10, 19, 0.8);
    --text-white: var(--white-off);
    --text-white-transparent: rgba(252, 251, 249, 0.5);
    
    /* Social media colors */
    --facebook-blue: #1877f2;
    --instagram-pink: #e4405f;
    
    /* Status indicator colors */
    --status-gray: var(--gray);
    --status-red: var(--primary-red);
    --status-green: var(--primary-green);
    --status-yellow: var(--primary-orange);
    --status-orange: var(--primary-orange);
    --status-blue: var(--primary-blue);
}

/* Dark Theme Variables */
[data-theme="dark"] {
    /* Background Colors */
    --bg-surface: var(--primary-blue);
    --bg-overlay: rgba(236, 181, 221, 0.1);
    
    /* Text Colors */
    --text-primary: var(--white-off);
    --text-secondary: var(--gray-light);
    --text-muted: var(--gray);
    
    /* Border Colors */
    --border-light: rgba(236, 181, 221, 0.1);
    --border-medium: rgba(236, 181, 221, 0.2);
    --border-dark: rgba(236, 181, 221, 0.3);
    
    /* Shadow Colors */
    --shadow-light: rgba(9, 10, 19, 0.3);
    --shadow-medium: rgba(9, 10, 19, 0.4);
    --shadow-dark: rgba(9, 10, 19, 0.5);
    
    /* Glassmorphism */
    --glass-bg: rgba(9, 10, 19, 0.2);
    --glass-border: rgba(236, 181, 221, 0.1);
    --glass-light: rgba(9, 10, 19, 0.05);
    --glass-bg-hover: rgba(9, 10, 19, 0.3);
    
    /* Main Background */
    --main-bg: var(--primary-blue-dark);
    
    /* Icon Filters */
    --icon-filter: brightness(0) invert(1);
    
    /* Additional dark theme colors */
    --bg-white: var(--primary-blue);
    --bg-light-gray: var(--primary-blue);
    --text-dark: var(--white-off);
    --text-darker: var(--white-off);
    --border-gray: var(--primary-blue);
    --border-light-gray: var(--primary-blue);
    --shadow-black: rgba(236, 181, 221, 0.1);
    --shadow-black-55: rgba(236, 181, 221, 0.55);
    --bg-black: var(--primary-blue-dark);
    --bg-black-transparent: rgba(236, 181, 221, 0.1);
    --text-white: var(--primary-blue-dark);
    --text-white-transparent: rgba(9, 10, 19, 0.7);
}

/* Color Utility Classes */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-light { color: var(--text-light); }
.text-muted { color: var(--text-muted); }

.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-accent { background-color: var(--bg-accent); }
.bg-surface { background-color: var(--bg-surface); }
.bg-overlay { background-color: var(--bg-overlay); }

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

.shadow-light { box-shadow: 0 4px 15px var(--shadow-light); }
.shadow-medium { box-shadow: 0 8px 25px var(--shadow-medium); }
.shadow-dark { box-shadow: 0 12px 35px var(--shadow-dark); }

/* Gradient Utility Classes */
.bg-gradient-primary { 
    background: var(--gradient-primary-fallback);
    background: var(--gradient-primary);
}
.bg-gradient-secondary { 
    background: var(--gradient-secondary-fallback);
    background: var(--gradient-secondary);
}
.bg-gradient-purple { 
    background: var(--gradient-purple-fallback);
    background: var(--gradient-purple);
}
.bg-gradient-red-orange { 
    background: var(--gradient-primary-fallback);
    background: var(--gradient-red-orange);
}
.bg-gradient-orange-purple { 
    background: var(--gradient-purple-fallback);
    background: var(--gradient-orange-purple);
}
.bg-gradient-dark { 
    background: var(--primary-blue-dark);
    background: var(--gradient-dark);
}
.bg-gradient-warm { 
    background: var(--primary-red);
    background: var(--gradient-warm);
}
.bg-gradient-cool { 
    background: var(--primary-blue);
    background: var(--gradient-cool);
}
.bg-gradient-yellow { 
    background: var(--gradient-yellow-fallback);
    background: var(--gradient-yellow);
}

/* Light Gradient Utility Classes */
.bg-gradient-primary-light { 
    background: var(--gradient-primary-light-fallback);
    background: var(--gradient-primary-light);
}
.bg-gradient-secondary-light { 
    background: var(--gradient-secondary-light-fallback);
    background: var(--gradient-purple-light-fallback);
}
.bg-gradient-purple-light { 
    background: var(--gradient-purple-light-fallback);
    background: var(--gradient-purple-light);
}
.bg-gradient-red-orange-light { 
    background: var(--gradient-red-orange-light-fallback);
    background: var(--gradient-red-orange-light);
}
.bg-gradient-orange-purple-light { 
    background: var(--gradient-orange-purple-light-fallback);
    background: var(--gradient-orange-purple-light);
}
.bg-gradient-dark-light { 
    background: var(--gradient-dark-light-fallback);
    background: var(--gradient-dark-light);
}
.bg-gradient-warm-light { 
    background: var(--gradient-warm-light-fallback);
    background: var(--gradient-warm-light);
}
.bg-gradient-cool-light { 
    background: var(--gradient-cool-light-fallback);
    background: var(--gradient-cool-light);
}
.bg-gradient-yellow-light { 
    background: var(--gradient-yellow-light-fallback);
    background: var(--gradient-yellow-light);
}

/* Dark Gradient Utility Classes */
.bg-gradient-primary-dark { 
    background: var(--gradient-primary-dark-fallback);
    background: var(--gradient-primary-dark);
}
.bg-gradient-secondary-dark { 
    background: var(--gradient-secondary-dark-fallback);
    background: var(--gradient-secondary-dark);
}
.bg-gradient-purple-dark { 
    background: var(--gradient-purple-dark-fallback);
    background: var(--gradient-purple-dark);
}
.bg-gradient-red-orange-dark { 
    background: var(--gradient-red-orange-dark-fallback);
    background: var(--gradient-red-orange-dark);
}
.bg-gradient-orange-purple-dark { 
    background: var(--gradient-orange-purple-dark-fallback);
    background: var(--gradient-orange-purple-dark);
}
.bg-gradient-dark-dark { 
    background: var(--gradient-dark-dark-fallback);
    background: var(--gradient-dark-dark);
}
.bg-gradient-warm-dark { 
    background: var(--gradient-warm-dark-fallback);
    background: var(--gradient-warm-dark);
}
.bg-gradient-cool-dark { 
    background: var(--gradient-cool-dark-fallback);
    background: var(--gradient-cool-dark);
}
.bg-gradient-yellow-dark { 
    background: var(--gradient-yellow-dark-fallback);
    background: var(--gradient-yellow-dark);
}

/* Ensure gradients are not overridden by glassmorphism */
.bg-gradient-primary,
.bg-gradient-secondary,
.bg-gradient-purple,
.bg-gradient-red-orange,
.bg-gradient-orange-purple,
.bg-gradient-dark,
.bg-gradient-warm,
.bg-gradient-cool,
.bg-gradient-yellow,
.bg-gradient-primary-light,
.bg-gradient-secondary-light,
.bg-gradient-purple-light,
.bg-gradient-red-orange-light,
.bg-gradient-orange-purple-light,
.bg-gradient-dark-light,
.bg-gradient-warm-light,
.bg-gradient-cool-light,
.bg-gradient-yellow-light,
.bg-gradient-primary-dark,
.bg-gradient-secondary-dark,
.bg-gradient-purple-dark,
.bg-gradient-red-orange-dark,
.bg-gradient-orange-purple-dark,
.bg-gradient-dark-dark,
.bg-gradient-warm-dark,
.bg-gradient-cool-dark,
.bg-gradient-yellow-dark {
    background-attachment: scroll;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    /* Ensure gradients take precedence */
    background-image: var(--gradient-primary);
}

/* Specific gradient overrides */
.bg-gradient-primary { background-image: var(--gradient-primary) !important; }
.bg-gradient-secondary { background-image: var(--gradient-secondary) !important; }
.bg-gradient-purple { background-image: var(--gradient-purple) !important; }
.bg-gradient-red-orange { background-image: var(--gradient-red-orange) !important; }
.bg-gradient-orange-purple { background-image: var(--gradient-orange-purple) !important; }
.bg-gradient-dark { background-image: var(--gradient-dark) !important; }
.bg-gradient-warm { background-image: var(--gradient-warm) !important; }
.bg-gradient-cool { background-image: var(--gradient-cool) !important; }
.bg-gradient-yellow { background-image: var(--gradient-yellow) !important; }

/* Light gradient overrides */
.bg-gradient-primary-light { background-image: var(--gradient-primary-light) !important; }
.bg-gradient-secondary-light { background-image: var(--gradient-secondary-light) !important; }
.bg-gradient-purple-light { background-image: var(--gradient-purple-light) !important; }
.bg-gradient-red-orange-light { background-image: var(--gradient-red-orange-light) !important; }
.bg-gradient-orange-purple-light { background-image: var(--gradient-orange-purple-light) !important; }
.bg-gradient-dark-light { background-image: var(--gradient-dark-light) !important; }
.bg-gradient-warm-light { background-image: var(--gradient-warm-light) !important; }
.bg-gradient-cool-light { background-image: var(--gradient-cool-light) !important; }
.bg-gradient-yellow-light { background-image: var(--gradient-yellow-light) !important; }

/* Dark gradient overrides */
.bg-gradient-primary-dark { background-image: var(--gradient-primary-dark) !important; }
.bg-gradient-secondary-dark { background-image: var(--gradient-secondary-dark) !important; }
.bg-gradient-purple-dark { background-image: var(--gradient-purple-dark) !important; }
.bg-gradient-red-orange-dark { background-image: var(--gradient-red-orange-dark) !important; }
.bg-gradient-orange-purple-dark { background-image: var(--gradient-orange-purple-dark) !important; }
.bg-gradient-dark-dark { background-image: var(--gradient-dark-dark) !important; }
.bg-gradient-warm-dark { background-image: var(--gradient-warm-dark) !important; }
.bg-gradient-cool-dark { background-image: var(--gradient-cool-dark) !important; }
.bg-gradient-yellow-dark { background-image: var(--gradient-yellow-dark) !important; }

/* Glassmorphism Utilities */
.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}

.glass-light {
    background: var(--glass-light);
    border: 1px solid var(--border-light);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Dark theme glass adjustments */
[data-theme="dark"] .glass-light {
    background: var(--glass-light);
    border: 1px solid var(--border-light);
}