:root {
    /* Primary Brand Colors */
    --wine: #5D1F44;           /* Deep wine/burgundy - primary brand color */
    --gold: #B37A24;           /* Rich gold - secondary brand color */
    --white: #FFFFFF;          /* Pure white - base color */
    
    /* Semantic Color Names */
    --primary: var(--wine);    /* Primary actions and highlights */
    --secondary: var(--gold);  /* Secondary actions and accents */
    --base: var(--white);      /* Base background color */
    
    /* Color Variations */
    --wine-light: #7A2F5A;     /* Lighter wine for hover states */
    --wine-dark: #4A1836;      /* Darker wine for pressed states */
    --wine-soft: #5D1F4415;    /* Wine with 15% opacity for backgrounds */
    --wine-muted: #5D1F4430;   /* Wine with 30% opacity for subtle backgrounds */
    
    --gold-light: #C89A44;     /* Lighter gold for hover states */
    --gold-dark: #936018;      /* Darker gold for pressed states */
    --gold-soft: #B37A2415;    /* Gold with 15% opacity for backgrounds */
    --gold-muted: #B37A2430;   /* Gold with 30% opacity for subtle backgrounds */
    
    /* Gradients */
    --gradient-wine: linear-gradient(135deg, var(--wine) 0%, var(--wine-light) 100%);
    --gradient-gold: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    --gradient-primary: linear-gradient(135deg, var(--wine) 0%, var(--gold) 100%);
    --gradient-reverse: linear-gradient(135deg, var(--gold) 0%, var(--wine) 100%);
    
    /* Text Colors */
    --text-on-wine: var(--white);
    --text-on-gold: var(--white);
    --text-primary: var(--wine);
    --text-secondary: var(--gold);
    --text-dark: #2d3436;
    --text-muted: #6c757d;
    
    /* Shadows */
    --shadow-wine: 0 3px 10px rgba(93, 31, 68, 0.3);
    --shadow-gold: 0 3px 10px rgba(179, 122, 36, 0.3);
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 5px 20px rgba(0, 0, 0, 0.12);
    
    /* Status Colors */
    --success: #10b981;
    --danger: #ef4444;
    --warning: var(--gold);
    --info: #3b82f6;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* Utility Classes */
.bg-wine {
    background-color: var(--wine);
    color: var(--text-on-wine);
}

.bg-gold {
    background-color: var(--gold);
    color: var(--text-on-gold);
}

.bg-gradient-primary {
    background: var(--gradient-primary);
    color: var(--white);
}

.bg-gradient-reverse {
    background: var(--gradient-reverse);
    color: var(--white);
}

.text-wine {
    color: var(--wine);
}

.text-gold {
    color: var(--gold);
}

.border-wine {
    border-color: var(--wine);
}

.border-gold {
    border-color: var(--gold);
}

/* Badge Styles */
.badge-wine {
    background-color: var(--wine);
    color: var(--white);
}

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

/* Button Styles */
.btn-wine {
    background-color: var(--wine);
    color: var(--white);
    border: none;
    transition: all var(--transition-base);
}

.btn-wine:hover {
    background-color: var(--wine-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-wine);
}

.btn-gold {
    background-color: var(--gold);
    color: var(--white);
    border: none;
    transition: all var(--transition-base);
}

.btn-gold:hover {
    background-color: var(--gold-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

.btn-outline-wine {
    background-color: transparent;
    color: var(--wine);
    border: 2px solid var(--wine);
    transition: all var(--transition-base);
}

.btn-outline-wine:hover {
    background-color: var(--wine);
    color: var(--white);
}

.btn-outline-gold {
    background-color: transparent;
    color: var(--gold);
    border: 2px solid var(--gold);
    transition: all var(--transition-base);
}

.btn-outline-gold:hover {
    background-color: var(--gold);
    color: var(--white);
}