/* ============================================================
   GLASSCOR ECOMERCIO — Design System Variables
   Separar de main.css para facilitar theming futuro.
   ============================================================ */

:root {
  /* Paleta principal */
  --c-dark:       #0a1628;
  --c-dark-mid:   #0f2040;
  --c-dark-soft:  #162a54;
  --c-blue:       #1a3a72;
  --c-blue-mid:   #1e4d9e;
  --c-accent:     #c9a84c;
  --c-accent-lt:  #e8c96a;
  --c-accent-dk:  #a07830;
  --c-white:      #ffffff;
  --c-off-white:  #f8f9fb;
  --c-gray-lt:    #e8ecf2;
  --c-gray:       #9ba8be;
  --c-gray-dk:    #5a6882;
  --c-text:       #1c2740;
  --c-text-soft:  #4a5a78;
  --c-danger:     #c0392b;
  --c-success:    #1a7a4a;

  /* Glassmorphism */
  --glass-bg:     rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);

  /* Tipografia */
  --font-sans:    'Inter', 'Segoe UI', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Escalas fluidas (clamp: min, preferred, max) */
  --text-xs:   clamp(0.7rem,  1.5vw, 0.8rem);
  --text-sm:   clamp(0.82rem, 1.8vw, 0.9rem);
  --text-base: clamp(0.9rem,  2vw,   1rem);
  --text-md:   clamp(1rem,    2.2vw, 1.125rem);
  --text-lg:   clamp(1.1rem,  2.5vw, 1.25rem);
  --text-xl:   clamp(1.25rem, 3vw,   1.5rem);
  --text-2xl:  clamp(1.5rem,  4vw,   2rem);
  --text-3xl:  clamp(1.8rem,  5vw,   2.5rem);
  --text-hero: clamp(2.2rem,  6vw,   3.5rem);

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

  /* Bordes y radios */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.18);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.24);
  --shadow-xl: 0 16px 56px rgba(0,0,0,0.32);

  /* Transiciones */
  --trans-fast:   150ms ease;
  --trans-normal: 250ms ease;
  --trans-slow:   400ms ease;

  /* Layout */
  --container-max:  1400px;
  --header-h:       72px;
  --sidebar-w:      280px;
  --card-min-w:     260px;
  --card-max-w:     380px;

  /* Z-index */
  --z-base:    1;
  --z-card:    10;
  --z-drawer:  100;
  --z-header:  200;
  --z-modal:   300;
  --z-cookie:  400;
  --z-toast:   500;
}

/* Breakpoints documentados (uso en media queries):
   xs:  320px
   sm:  480px
   md:  768px
   lg:  1024px
   xl:  1280px
   2xl: 1536px
*/