/* ============================================
   AMAZONIA — variables.css
   Paleta de colores, tipografía, espaciado y
   todas las variables CSS globales del proyecto.
   ============================================ */

:root {
    /* ── Colores base ── */
    --color-bg-primary:    #0a0e27;
    --color-bg-secondary:  #0d1230;
    --color-bg-card:       rgba(255, 255, 255, 0.04);
    --color-bg-card-hover: rgba(255, 255, 255, 0.07);
    --color-bg-input:      rgba(255, 255, 255, 0.06);

    /* ── Colores de marca ── */
    --color-primary:       #00e676;   /* Verde eléctrico — selva + tech */
    --color-primary-dark:  #00c853;
    --color-primary-glow:  rgba(0, 230, 118, 0.18);
    --color-secondary:     #2979ff;   /* Azul brillante */
    --color-secondary-dark:#1565c0;
    --color-secondary-glow:rgba(41, 121, 255, 0.18);

    /* ── Degradados ── */
    --gradient-primary:      linear-gradient(135deg, #00e676 0%, #2979ff 100%);
    --gradient-primary-soft: linear-gradient(135deg, rgba(0,230,118,0.12) 0%, rgba(41,121,255,0.12) 100%);
    --gradient-hero:         linear-gradient(135deg, #0a0e27 0%, #0d1230 60%, #091628 100%);
    --gradient-card-border:  linear-gradient(135deg, rgba(0,230,118,0.35), rgba(41,121,255,0.35));
    --gradient-green-glow:   radial-gradient(ellipse at center, rgba(0,230,118,0.15) 0%, transparent 70%);
    --gradient-blue-glow:    radial-gradient(ellipse at center, rgba(41,121,255,0.12) 0%, transparent 70%);

    /* ── Texto ── */
    --color-text-primary:   #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.70);
    --color-text-muted:     rgba(255, 255, 255, 0.40);
    --color-text-accent:    #00e676;

    /* ── Estados / Alertas ── */
    --color-success: #00e676;
    --color-warning: #ffca28;
    --color-danger:  #ff5252;
    --color-info:    #40c4ff;

    --color-success-bg: rgba(0, 230, 118, 0.10);
    --color-warning-bg: rgba(255, 202, 40,  0.10);
    --color-danger-bg:  rgba(255, 82,  82,  0.10);
    --color-info-bg:    rgba(64,  196, 255, 0.10);

    --color-success-border: rgba(0, 230, 118, 0.30);
    --color-warning-border: rgba(255, 202, 40,  0.30);
    --color-danger-border:  rgba(255, 82,  82,  0.30);
    --color-info-border:    rgba(64,  196, 255, 0.30);

    /* ── Bordes ── */
    --border-subtle:  rgba(255, 255, 255, 0.07);
    --border-medium:  rgba(255, 255, 255, 0.15);
    --border-accent:  rgba(0, 230, 118, 0.30);
    --border-blue:    rgba(41, 121, 255, 0.30);

    --border-radius-xs:   4px;
    --border-radius-sm:   8px;
    --border-radius-md:   12px;
    --border-radius-lg:   16px;
    --border-radius-xl:   24px;
    --border-radius-2xl:  32px;
    --border-radius-full: 9999px;

    /* ── Sombras ── */
    --shadow-card:        0 4px 24px rgba(0, 0, 0, 0.35);
    --shadow-card-hover:  0 8px 48px rgba(0, 0, 0, 0.45);
    --shadow-glow-green:  0 0 24px rgba(0, 230, 118, 0.30);
    --shadow-glow-blue:   0 0 24px rgba(41, 121, 255, 0.30);
    --shadow-btn-primary: 0 4px 20px rgba(0, 230, 118, 0.35);
    --shadow-btn-hover:   0 6px 30px rgba(0, 230, 118, 0.50);

    /* ── Tipografía ── */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    --font-size-2xs: 0.625rem;   /*  10px */
    --font-size-xs:  0.75rem;    /*  12px */
    --font-size-sm:  0.875rem;   /*  14px */
    --font-size-base:1rem;       /*  16px */
    --font-size-md:  1.125rem;   /*  18px */
    --font-size-lg:  1.25rem;    /*  20px */
    --font-size-xl:  1.5rem;     /*  24px */
    --font-size-2xl: 2rem;       /*  32px */
    --font-size-3xl: 2.5rem;     /*  40px */
    --font-size-4xl: 3rem;       /*  48px */
    --font-size-5xl: 3.75rem;    /*  60px */

    --font-weight-normal:  400;
    --font-weight-medium:  500;
    --font-weight-semibold:600;
    --font-weight-bold:    700;
    --font-weight-black:   800;

    /* ── Espaciado (escala 4px) ── */
    --space-1:  0.25rem;   /*  4px */
    --space-2:  0.5rem;    /*  8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */

    /* ── Layout ── */
    --header-height: 72px;
    --max-width:     1200px;
    --content-padding: var(--space-6);

    /* ── Transiciones ── */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-index ── */
    --z-base:   1;
    --z-card:   10;
    --z-header: 100;
    --z-modal:  200;
    --z-toast:  300;
}