/* Tokens de marca A&N Distribuciones — traducción CSS de DESIGN.md */
:root{
  /* Color — versión suavizada del kit de marca (sin negro/blanco/rojo puros,
     menos saturación y más contraste "profesional"). El rojo/negro 100%
     puros del kit (#E30613 / #111111) quedan documentados en DESIGN.md para
     el logo y piezas de marca, pero la UI usa esta versión atenuada. */
  --color-primary: #CE2731;
  --color-primary-dark: #A61F27;
  --color-black: #1C1C1C;
  --color-dark-gray: #3A3A3A;
  --color-gray: #B3B3B3;
  --color-light-gray: #E6E6E6;
  --color-bg: #F6F5F4;
  --color-white: #FAFAF9;
  --color-success: #1B8A3D;
  --color-success-bg: #E9F7EE;
  --color-warning-bg: #FFF4E5;

  /* Tipografía */
  --font-base: 'DM Sans', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  --font-heading: 'Poppins', 'DM Sans', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  --fs-xs: .75rem;    /* 12 */
  --fs-sm: .875rem;   /* 14 */
  --fs-md: 1rem;      /* 16 */
  --fs-lg: 1.125rem;  /* 18 */
  --fs-xl: 1.5rem;    /* 24 */
  --fs-2xl: 2rem;     /* 32 */
  --fs-3xl: 2.5rem;   /* 40 */

  /* Espaciado (8px system) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;

  /* Bordes / sombras */
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-card-hover: 0 8px 20px rgba(0,0,0,.10);
  --shadow-header: 0 2px 8px rgba(0,0,0,.10);
  --shadow-popover: 0 12px 32px rgba(0,0,0,.16);

  /* Layout */
  --container-max: 1280px;
  --header-h-mobile: 56px;
  --header-h-desktop: 96px;
  --topbar-h: 36px;
  --bottomnav-h: 60px;
  --z-header: 100;
  --z-offcanvas: 200;
  --z-cart: 200;
  --z-search: 90;
  --z-modal: 300;
  --z-toast: 400;

  /* Motion */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
}