/* ============================================================
   VARIABLES.CSS — LA BIBLIA
   Todo valor que se use en el proyecto viene de aquí.
   Nunca hardcodear colores, espacios, tiempos ni fuentes.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     FONDO BASE (dark — como Linear / Vercel)
  ---------------------------------------------------------- */
  --color-bg-base:          #060912;   /* Casi negro con tinte azul marino profundo */
  --color-bg-surface:       #0d1117;   /* Cards y superficies elevadas */
  --color-bg-elevated:      #161b27;   /* Elementos sobre surface */

  /* Aliases semánticos que usan los componentes */
  --color-bg-primary:       var(--color-bg-base);
  --color-bg-secondary:     var(--color-bg-surface);
  --color-bg-tertiary:      var(--color-bg-elevated);
  --color-bg-gray-100:      rgba(255, 255, 255, 0.05);

  /* ----------------------------------------------------------
     COLORES DE MARCA
  ---------------------------------------------------------- */
  --color-primary:          #3b82f6;   /* Blue-500 — eléctrico, médico/tech */
  --color-primary-dark:     #1d4ed8;
  --color-primary-light:    #60a5fa;

  --color-secondary:        #06b6d4;   /* Cyan-500 — laboratorios */
  --color-secondary-dark:   #0891b2;

  --color-accent:           #f43f5e;   /* Rose-500 — urgencia */

  --color-success:          #10b981;   /* Emerald-500 — farmacias */
  --color-warning:          #f59e0b;
  --color-error:            #ef4444;

  /* ----------------------------------------------------------
     TEXTO
  ---------------------------------------------------------- */
  --color-text-primary:     #f1f5f9;   /* Off-white — mayor confort que blanco puro */
  --color-text-secondary:   #94a3b8;   /* Slate-400 */
  --color-text-tertiary:    #475569;   /* Slate-600 */

  /* ----------------------------------------------------------
     BORDES
  ---------------------------------------------------------- */
  --color-border:           rgba(255, 255, 255, 0.08);
  --color-border-strong:    rgba(255, 255, 255, 0.16);

  /* ----------------------------------------------------------
     GLASSMORPHISM (el corazón visual)
     Funciona bien SOLO sobre fondo oscuro.
  ---------------------------------------------------------- */
  --glass-bg:               rgba(255, 255, 255, 0.04);
  --glass-bg-hover:         rgba(255, 255, 255, 0.07);
  --glass-bg-solid:         rgba(13, 17, 23, 0.8);    /* Para modales / navbar scrolled */
  --glass-border:           rgba(255, 255, 255, 0.08);
  --glass-border-strong:    rgba(255, 255, 255, 0.18);
  --glass-shadow:           0 4px 24px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  --glass-blur:             blur(20px);

  /* ----------------------------------------------------------
     GLOW — acentos de luz para hover y featured
  ---------------------------------------------------------- */
  --glow-primary:           0 0 40px rgba(59, 130, 246, 0.25);
  --glow-cyan:              0 0 40px rgba(6, 182, 212, 0.2);
  --glow-green:             0 0 40px rgba(16, 185, 129, 0.2);

  /* ----------------------------------------------------------
     TIPOGRAFÍA
  ---------------------------------------------------------- */
  --font-body:              'Inter', sans-serif;
  --font-display:           'Inter', sans-serif;

  --font-size-xs:           0.75rem;    /* 12px */
  --font-size-sm:           0.875rem;   /* 14px */
  --font-size-base:         1rem;       /* 16px */
  --font-size-lg:           1.125rem;   /* 18px */
  --font-size-xl:           1.25rem;    /* 20px */
  --font-size-2xl:          1.5rem;     /* 24px */
  --font-size-3xl:          1.875rem;   /* 30px */
  --font-size-4xl:          2.25rem;    /* 36px */
  --font-size-5xl:          3rem;       /* 48px */

  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;

  --line-height-tight:      1.25;
  --line-height-normal:     1.5;
  --line-height-relaxed:    1.75;

  /* ----------------------------------------------------------
     ESPACIADO
  ---------------------------------------------------------- */
  --spacing-xs:             0.25rem;   /* 4px  */
  --spacing-sm:             0.5rem;    /* 8px  */
  --spacing-md:             1rem;      /* 16px */
  --spacing-lg:             1.5rem;    /* 24px */
  --spacing-xl:             2rem;      /* 32px */
  --spacing-2xl:            3rem;      /* 48px */
  --spacing-3xl:            4rem;      /* 64px */
  --spacing-4xl:            6rem;      /* 96px */
  --spacing-5xl:            8rem;      /* 128px */

  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */
  --container-max:          1200px;
  --container-padding:      var(--spacing-md);

  /* ----------------------------------------------------------
     BORDES DE RADIO
  ---------------------------------------------------------- */
  --radius-sm:              0.25rem;
  --radius-md:              0.5rem;
  --radius-lg:              1rem;
  --radius-xl:              1.5rem;
  --radius-full:            9999px;

  --border-width:           1px;
  --border-width-strong:    2px;

  /* ----------------------------------------------------------
     SOMBRAS
  ---------------------------------------------------------- */
  --shadow-sm:              0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:              0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:              0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl:              0 20px 40px rgba(0, 0, 0, 0.6);

  /* ----------------------------------------------------------
     ANIMACIONES
  ---------------------------------------------------------- */
  --duration-fast:          150ms;
  --duration-normal:        300ms;
  --duration-slow:          500ms;

  --ease-smooth:            cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:               cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out:            cubic-bezier(0.4, 0.0, 0.2, 1);

  /* ----------------------------------------------------------
     Z-INDEX
  ---------------------------------------------------------- */
  --z-base:                 0;
  --z-dropdown:             100;
  --z-sticky:               200;
  --z-navbar:               300;
  --z-modal:                400;
  --z-toast:                500;

  /* Aliases de compatibilidad con el sistema de diseño */
  --ld-fg-1: var(--color-text-primary);
  --ld-fg-2: var(--color-text-secondary);
  --ld-fg-3: var(--color-text-tertiary);
  --brand:   #2563eb;
}