/* ==========================================================================
   VSuppliers — Design tokens
   Valores extraídos del sitio Divi actual, normalizados.
   ========================================================================== */

:root {
  /* --- Color: marca ------------------------------------------------------ */
  --vs-red:          #e02b20;  /* Acento principal: enlaces, nav, botones */
  --vs-red-hover:    #b8221a;
  --vs-red-deep:     #be3116;  /* Fondo de la sección CTA */

  /* --- Color: neutros ---------------------------------------------------- */
  --vs-black:        #0a0a0a;  /* Footer */
  --vs-ink:          #333333;  /* Títulos */
  --vs-body:         #4a4a4a;  /* Texto de cuerpo (era #666, subido para contraste AA) */
  --vs-muted:        #707070;  /* Sub-footer, texto secundario */
  --vs-line:         #d8d8d8;  /* Bordes */
  --vs-surface:      #ffffff;
  --vs-surface-alt:  #f4f4f4;
  --vs-surface-100:  #efefef;
  --vs-overlay:      rgba(10, 10, 10, .55);
  --vs-overlay-strong: rgba(10, 10, 10, .78);

  /* --- Color: semántico -------------------------------------------------- */
  --vs-success:      #1f7a3d;
  --vs-error:        #c0271d;
  --vs-focus:        #0b63ce;   /* Anillo de foco: azul, para no confundirse con el rojo de marca */

  /* --- Tipografía -------------------------------------------------------- */
  --vs-font-body:    "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --vs-font-heading: "Lato", "Open Sans", system-ui, -apple-system, sans-serif;

  /* Escala fluida. El sitio Divi usaba 14px de base; subimos a 16-17px. */
  --vs-fs-xs:   0.8125rem;                                   /* 13px */
  --vs-fs-sm:   0.875rem;                                    /* 14px */
  --vs-fs-base: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);    /* 16 → 17px */
  --vs-fs-lg:   clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);  /* 18 → 20px */
  --vs-fs-h3:   clamp(1.25rem, 1.1rem + 0.7vw, 1.6875rem);   /* 20 → 27px */
  --vs-fs-h2:   clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);    /* 24 → 34px */
  --vs-fs-h1:   clamp(2rem, 1.4rem + 2.8vw, 3.5rem);         /* 32 → 56px */

  --vs-lh-tight: 1.15;
  --vs-lh-snug:  1.35;
  --vs-lh-body:  1.7;

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

  --vs-tracking-wide: 0.06em;

  /* --- Layout ------------------------------------------------------------ */
  --vs-container:      1080px;   /* Ancho de fila del sitio actual */
  --vs-container-wide: 1320px;
  --vs-gutter:         clamp(1rem, 4vw, 2rem);

  /* --- Espaciado (escala 4px) -------------------------------------------- */
  --vs-space-1:  0.25rem;
  --vs-space-2:  0.5rem;
  --vs-space-3:  0.75rem;
  --vs-space-4:  1rem;
  --vs-space-5:  1.5rem;
  --vs-space-6:  2rem;
  --vs-space-7:  3rem;
  --vs-space-8:  4rem;
  --vs-space-9:  6rem;

  /* Padding vertical de sección: el sitio usa 51px; lo hacemos fluido. */
  --vs-section-y: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);

  /* --- Bordes y sombras -------------------------------------------------- */
  --vs-radius-sm: 3px;   /* Radio de los botones del sitio actual */
  --vs-radius:    6px;
  --vs-radius-lg: 12px;

  --vs-shadow-header: 0 1px 0 rgba(0, 0, 0, .1);
  --vs-shadow-card:   0 1px 2px rgba(10, 10, 10, .06), 0 8px 24px rgba(10, 10, 10, .08);
  --vs-shadow-lift:   0 4px 8px rgba(10, 10, 10, .08), 0 16px 40px rgba(10, 10, 10, .12);

  /* --- Cabecera ---------------------------------------------------------- */
  --vs-header-h:      80px;
  --vs-header-h-sm:   64px;
  --vs-logo-h:        43px;

  /* --- Movimiento -------------------------------------------------------- */
  --vs-ease:      cubic-bezier(.2, .6, .3, 1);
  --vs-duration:  220ms;

  --vs-z-header:  100;
  --vs-z-overlay: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root { --vs-duration: 0ms; }
}