/* ======================
   VARIABLES & CSS CUSTOM PROPERTIES
   El Templo - Premium Drinks Catalog
   ====================== */

:root {
    /* El Templo Brand Colors - Premium Drinks */
    --color-primary: #C9A86A;        /* Oro/Gold */
    --color-primary-dark: #A88A54;   /* Oro oscuro */
    --color-primary-light: #E5D4B5;  /* Oro claro */
    --color-background: #0A0A0A;     /* Negro profundo */
    --color-surface: #1A1A1A;        /* Negro card */
    --color-text-dark: #F5F5F5;      /* Blanco/crema */
    --color-text-medium: #C9A86A;    /* Oro para secundario */
    --color-text-light: #8A8A8A;     /* Gris medio */
    --color-border: #2A2A2A;         /* Border sutil */
    --color-success: #22C55E;        /* Verde WhatsApp */
    --color-warning: #F59E0B;        /* Amber */
    
    /* Semantic Colors (aliases for readability) */
    --color-gold: var(--color-primary);
    --color-dark: var(--color-background);
    --color-light: var(--color-text-dark);
    
    /* Typography */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Roboto', sans-serif;
    
    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    /* Safe Areas for iOS/Android */
    --safe-area-top: env(safe-area-inset-top);
    --safe-area-bottom: env(safe-area-inset-bottom);
}