/* ===========================================================
   Cobegisa — Tokens del sistema de diseño "La Once"
   Fuente: Sistema de diseño La Once (manual de marca + tienda).
   Capa de variables: primitivos → semánticos. styles.css solo
   consume estos tokens (no usa valores crudos de color/tipo).
   =========================================================== */

:root{

  /* ---------- 1. Color · primitivos de marca ---------- */
  --lo-azul-marca:#012F72;   /* azul oscuro · marca, títulos, fondos fuertes */
  --lo-azul-web:#098BBF;     /* azul claro · enlaces/acentos web */
  --lo-amarillo:#F6B62D;     /* amarillo · acento principal, CTAs primarios */
  --lo-naranja:#F48A00;      /* naranja · campañas/temporada */
  --lo-rosa:#EA3B8B;         /* rosa · campañas/belleza */
  --lo-verde-wsp:#25D366;    /* WhatsApp / compra directa */
  --lo-verde-salud:#1F8A5B;  /* categoría salud / disponible */
  --lo-blanco:#FFFFFF;

  /* ---------- 2. Color · neutros y superficies ---------- */
  --lo-bg:#F7F8FB;           /* fondo general */
  --lo-surface:#FFFFFF;      /* tarjetas, navbar */
  --lo-ink:#012F72;          /* texto de titulares */
  --lo-text:#3A4068;         /* texto de párrafo */
  --lo-muted:#4A5B7D;        /* texto secundario / descripciones */
  --lo-border:#E6E9F2;       /* bordes de inputs */
  --lo-border-soft:#EEF0F6;  /* bordes suaves de tarjeta */
  --lo-chip-bg:#E9ECFB;      /* fondo de chips neutros */

  /* chips de estado (del sistema) */
  --lo-chip-nuevo-bg:#B8BFDC;
  --lo-chip-rec-bg:#FBE3B0;
  --lo-chip-oferta-bg:#FBE1EA;
  --lo-dot-stock:#1B9E4B;
  --lo-dot-off:#B9BCCB;

  /* ---------- 3. Tokens semánticos ---------- */
  --color-bg:var(--lo-bg);
  --color-surface:var(--lo-surface);
  --color-heading:var(--lo-ink);
  --color-text:var(--lo-text);
  --color-text-muted:var(--lo-muted);
  --color-text-on-dark:#FFFFFF;

  --color-primary:var(--lo-azul-marca);     /* color de marca dominante */
  --color-secondary:var(--lo-azul-web);     /* azul web / enlaces */
  --color-accent:var(--lo-amarillo);        /* acento + CTA primario */
  --color-accent-ink:var(--lo-azul-marca);  /* texto sobre amarillo */
  --color-campaign:var(--lo-rosa);
  --color-wa:var(--lo-verde-wsp);

  --color-border:var(--lo-border);
  --color-border-soft:var(--lo-border-soft);

  /* ---------- 4. Tipografía ---------- */
  --font-display:'Comfortaa', system-ui, sans-serif;  /* marca, títulos, promo */
  --font-ui:'Quicksand', system-ui, sans-serif;       /* UI, body, CTAs, chips */
  --font-detail:'Poppins', system-ui, sans-serif;     /* descripciones, nav, small */

  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;

  /* escala de tamaños */
  --text-xs:11px;
  --text-sm:12px;
  --text-base:14px;
  --text-md:15px;
  --text-lg:19px;
  --text-xl:22px;
  --text-2xl:28px;
  --text-3xl:34px;

  --leading-tight:1.1;
  --leading-snug:1.25;
  --leading-normal:1.5;
  --tracking-wide:.5px;
  --tracking-wider:1.5px;

  /* ---------- 5. Espaciado (base 4px) ---------- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;

  /* ---------- 6. Radios ---------- */
  --radius-sm:9px;
  --radius-md:14px;
  --radius-lg:18px;    /* tarjetas */
  --radius-xl:24px;    /* search / inputs grandes */
  --radius-pill:9999px;
  --radius-full:50%;

  /* ---------- 7. Sombras (tinte azul marca) ---------- */
  --shadow-card:0 8px 24px rgba(1,47,114,.07);
  --shadow-card-hover:0 14px 32px rgba(1,47,114,.14);
  --shadow-nav:0 8px 24px rgba(1,47,114,.08);
  --shadow-float:0 6px 18px rgba(1,47,114,.30);

  /* ---------- 8. Layout ---------- */
  --container-max:1200px;

  /* ---------- 9. z-index ---------- */
  --z-slider:5;
  --z-nav:200;
  --z-float:300;
  --z-skip:1000;

  /* ---------- 10. Movimiento ---------- */
  --transition-fast:.2s;
  --transition-base:.3s;

  /* Breakpoints (referencia — las @media usan el valor literal):
     --bp-sm:560px · --bp-md:768px · --bp-lg:900px */
}