/**
 * ONA Club - Variables CSS
 * Sistema de diseno "Quiet Luxury"
 * Paleta: beige/hueso, antracita, tonos tierra claros
 */

:root {
    /* === Colores principales === */
    --color-primary: #8b7355;          /* Taupe calido */
    --color-primary-light: #a8917a;
    --color-primary-dark: #6e5a42;
    --color-primary-rgb: 139, 115, 85;
    
    --color-secondary: #6b8f71;        /* Verde salvia suave */
    --color-secondary-light: #8aad8f;
    --color-secondary-dark: #517556;
    
    --color-accent: #a69080;           /* Piedra calida */
    --color-accent-light: #bfad9f;
    --color-accent-dark: #8a7565;
    
    /* === Fondos === */
    --bg-dark: #F2EBE3;               /* Fondo principal hueso/crema */
    --bg-darker: #EDE6DD;             /* Fondo navbar/sidebar */
    --bg-card: #FFFFFF;               /* Fondo de tarjetas */
    --bg-card-hover: #F9F6F2;
    --bg-surface: #EDE6DD;
    --bg-input: #F7F3EE;
    --bg-overlay: rgba(42, 37, 32, 0.6);
    
    /* === Texto === */
    --text-primary: #333333;          /* Antracita profundo */
    --text-secondary: #6B6560;        /* Gris calido */
    --text-muted: #9E9892;            /* Gris atenuado */
    --text-on-primary: #FFFFFF;       /* Texto sobre color primario */
    --text-heading: #2A2520;          /* Casi negro calido */
    
    /* === Estados === */
    --color-success: #4caf7d;
    --color-success-bg: rgba(76, 175, 125, 0.10);
    --color-warning: #e0a243;
    --color-warning-bg: rgba(224, 162, 67, 0.10);
    --color-error: #d4564a;
    --color-error-bg: rgba(212, 86, 74, 0.10);
    --color-info: #5b8db8;
    --color-info-bg: rgba(91, 141, 184, 0.10);
    
    /* === Sombras === */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 16px 50px rgba(0, 0, 0, 0.12);
    --shadow-gold: 0 4px 20px rgba(139, 115, 85, 0.12);
    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.04);
    
    /* === Bordes === */
    --border-color: rgba(0, 0, 0, 0.08);
    --border-light: rgba(0, 0, 0, 0.04);
    --border-radius-sm: 6px;
    --border-radius: 10px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    --border-radius-full: 50%;
    
    /* === Tipografia === */
    --font-family: 'Open Sauce One', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-heading: 'League Spartan', 'Arial Black', sans-serif;
    --font-subtitle: 'Montserrat', 'Arial', sans-serif;
    --font-lifestyle: 'Quicksand', 'Verdana', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    
    --font-size-xs: 0.7rem;
    --font-size-sm: 0.813rem;
    --font-size-base: 0.938rem;
    --font-size-md: 1.063rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 1.875rem;
    --font-size-3xl: 2.25rem;
    --font-size-4xl: 3rem;
    
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    --line-height-tight: 1.2;
    --line-height-base: 1.6;
    --line-height-loose: 1.8;
    
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;
    --letter-spacing-wider: 0.12em;
    
    /* === Espaciado === */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    
    /* === Layout === */
    --container-max: 1200px;
    --container-narrow: 600px;
    --navbar-height: 60px;
    --bottom-nav-height: 70px;
    --sidebar-width: 280px;
    
    /* === Transiciones === */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* === Z-Index === */
    --z-dropdown: 100;
    --z-navbar: 200;
    --z-modal-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-tooltip: 600;
}