/* Фирменные цвета VezdeMarket */
:root {
    /* Основной оранжевый цвет */
    --brand-orange: #f48400;
    --brand-orange-hover: #d97706;
    --brand-orange-light: #fbbf24;
    --brand-orange-dark: #c2410c;
    
    /* Дополнительные цвета */
    --brand-blue: #2563eb;
    --brand-blue-hover: #1d4ed8;
    --brand-green: #10b981;
    --brand-green-hover: #059669;
    --brand-red: #ef4444;
    --brand-red-hover: #dc2626;
    
    /* Текст */
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --text-white: #ffffff;
    
    /* Фон */
    --bg-white: #ffffff;
    --bg-gray: #f9fafb;
    --bg-gray-light: #f3f4f6;
    --bg-orange-light: #fff7ed;
    
    /* Границы */
    --border-color: #e5e7eb;
    --border-orange: #f48400;
    
    /* Тени */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-orange: 0 4px 14px 0 rgba(244, 132, 0, 0.3);
}

/* Кастомные классы для Tailwind через arbitrary values */
.bg-brand-orange {
    background-color: var(--brand-orange) !important;
    color: #ffffff !important;
}

/* Hover эффект для bg-brand-orange */
.bg-brand-orange:hover {
    background-color: var(--brand-orange-hover) !important;
    color: #ffffff !important;
}

.bg-brand-orange-hover:hover {
    background-color: var(--brand-orange-hover) !important;
    color: #ffffff !important;
}

/* Поддержка Tailwind класса hover:bg-brand-orange-hover */
/* Tailwind генерирует классы вида hover:bg-brand-orange-hover, 
   которые применяются при hover, поэтому нужно правило для элементов с этим классом */
[class*="hover:bg-brand-orange-hover"]:hover {
    background-color: var(--brand-orange-hover) !important;
    color: #ffffff !important;
}

/* Гарантируем белый текст на оранжевом фоне для всех элементов */
button.bg-brand-orange,
a.bg-brand-orange,
button.bg-brand-orange.text-white,
a.bg-brand-orange.text-white,
.bg-brand-orange.text-white,
.text-white.bg-brand-orange,
[class*="bg-brand-orange"][class*="text-white"],
[class*="text-white"][class*="bg-brand-orange"] {
    color: #ffffff !important;
}

button.bg-brand-orange:hover,
a.bg-brand-orange:hover,
button.bg-brand-orange.text-white:hover,
a.bg-brand-orange.text-white:hover,
button[class*="bg-brand-orange"][class*="hover:bg-brand-orange-hover"]:hover,
button[class*="hover:bg-brand-orange-hover"]:hover,
.bg-brand-orange-hover:hover.text-white,
.text-white.bg-brand-orange-hover:hover,
.hover\:bg-brand-orange-hover:hover,
[class*="bg-brand-orange"]:hover[class*="text-white"],
[class*="text-white"][class*="bg-brand-orange"]:hover,
[class*="hover:bg-brand-orange-hover"]:hover {
    color: #ffffff !important;
    background-color: var(--brand-orange-hover) !important;
}

.text-brand-orange {
    color: var(--brand-orange) !important;
}

.text-brand-orange-hover:hover {
    color: var(--brand-orange-hover) !important;
}

.border-brand-orange {
    border-color: var(--brand-orange) !important;
}

.ring-brand-orange {
    --tw-ring-color: var(--brand-orange) !important;
}

/* Градиенты */
.bg-gradient-brand {
    background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-dark) 100%);
}

.bg-gradient-brand-light {
    background: linear-gradient(135deg, var(--brand-orange-light) 0%, var(--brand-orange) 100%);
}

/* Кнопки */
.btn-brand {
    background-color: var(--brand-orange);
    color: var(--text-white);
    transition: all 0.2s ease;
}

.btn-brand:hover {
    background-color: var(--brand-orange-hover);
    box-shadow: var(--shadow-orange);
}

.btn-brand-outline {
    border: 2px solid var(--brand-orange);
    color: var(--brand-orange);
    background-color: transparent;
}

.btn-brand-outline:hover {
    background-color: var(--brand-orange);
    color: var(--text-white);
}

/* Ссылки */
.link-brand {
    color: var(--brand-orange);
    transition: color 0.2s ease;
}

.link-brand:hover {
    color: var(--brand-orange-hover);
}

/* Бейджи/Лейблы */
.badge-brand {
    background-color: var(--brand-orange);
    color: var(--text-white);
}

.badge-brand-light {
    background-color: var(--bg-orange-light);
    color: var(--brand-orange-dark);
    border: 1px solid var(--brand-orange);
}