/* ============================================
   MADESA - Variables CSS
   Sistema de diseño Industrial Moderno
   ============================================ */

:root {
    /* === COLORES PRINCIPALES === */
    --color-primary:        #FF6B35;
    --color-primary-light:  #FF8C42;
    --color-primary-dark:   #E55A24;
    --color-primary-alpha:  rgba(255, 107, 53, 0.15);
    --color-primary-border: rgba(255, 107, 53, 0.3);

    /* === FONDOS === */
    --bg-main:      #1A1A2E;
    --bg-secondary: #16213E;
    --bg-dark:      #0F0F1E;
    --bg-card:      rgba(255, 255, 255, 0.04);
    --bg-card-hover:rgba(255, 255, 255, 0.07);
    --bg-overlay:   rgba(26, 26, 46, 0.95);
    --bg-input:     rgba(0, 0, 0, 0.3);

    /* === TEXTO === */
    --text-primary:   #FFFFFF;
    --text-secondary: #BBBBBB;
    --text-tertiary:  #888888;
    --text-muted:     #555566;
    --text-on-orange: #FFFFFF;

    /* === ESTADOS === */
    --color-success:       #2ECC71;
    --color-success-alpha: rgba(46, 204, 113, 0.15);
    --color-warning:       #F1C40F;
    --color-warning-alpha: rgba(241, 196, 15, 0.15);
    --color-danger:        #E74C3C;
    --color-danger-alpha:  rgba(231, 76, 60, 0.15);
    --color-info:          #3498DB;

    /* === TIPOGRAFÍA === */
    --font-display: 'Oswald', sans-serif;
    --font-body:    'Roboto', sans-serif;

    --size-xs:   0.75rem;   /* 12px */
    --size-sm:   0.875rem;  /* 14px */
    --size-base: 1rem;      /* 16px */
    --size-md:   1.125rem;  /* 18px */
    --size-lg:   1.25rem;   /* 20px */
    --size-xl:   1.5rem;    /* 24px */
    --size-2xl:  2rem;      /* 32px */
    --size-3xl:  2.5rem;    /* 40px */
    --size-4xl:  3rem;      /* 48px */
    --size-5xl:  4rem;      /* 64px */
    --size-hero: clamp(3rem, 8vw, 5rem);

    /* === DIMENSIONES === */
    --header-height: 100px;
    --logo-height: 80px;
    --mobile-menu-offset: -40px;
    --mobile-menu-drop: 40px;

    /* === ESPACIADO === */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* === BORDES === */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-full: 9999px;

    --border-base: 1px solid var(--color-primary-border);
    --border-card: 1px solid rgba(255, 255, 255, 0.08);

    /* === SOMBRAS === */
    --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md:     0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg:     0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-orange: 0 4px 20px rgba(255, 107, 53, 0.3);
    --shadow-orange-lg: 0 8px 40px rgba(255, 107, 53, 0.4);

    /* === TRANSICIONES === */
    --transition-fast:   all 0.15s ease;
    --transition-base:   all 0.25s ease;
    --transition-slow:   all 0.4s ease;
    --transition-bounce: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* === LAYOUT === */
    --max-width:        1400px;

    --sidebar-width:    260px;
    --container-pad:    clamp(1rem, 4vw, 2rem);

    /* === Z-INDEX === */
    --z-base:    1;
    --z-dropdown: 100;
    --z-sticky:  200;
    --z-header:  1000;
    --z-modal:   2000;
    --z-toast:   3000;
}