/*
 * Servicell Tablada · tokens del Sistema de diseño (SD 02 a 04) + fila 89 del Anexo 5.
 * Nombres canónicos: Anexo 6 A-10. Hover del CTA: #E84A14 (Anexo 5 fila 87, reemplaza el #FF6A2A de SD 02).
 * Breakpoints (H.0): mobile < 768, tablet 768–1023 (layout mobile), desktop ≥ 1024.
 */
:root {
  /* 02 · Color — base */
  --sv-fondo: #F2EFE9;
  --sv-superficie: #FFFFFF;
  --sv-sutil: #F7F5F0;
  --sv-linea: #E4DFD5;            /* bordes de tarjeta */
  --sv-linea-2: #D6D0C4;          /* bordes de campo (par de «Línea» en SD 02) */
  /* texto */
  --sv-texto: #1D1C18;
  --sv-texto-2: #4A4740;
  --sv-texto-3: #A8A49C;          /* decorativo sobre claro; texto sobre oscuro */
  --sv-texto-placeholder: #7A766E;
  /* oscuro */
  --sv-oscuro: #0F1433;
  --sv-oscuro-2: #16181D;
  --sv-degradado: linear-gradient(135deg, #0F1433, #16181D);
  --sv-degradado-pie: linear-gradient(160deg, #0F1433, #16181D);
  /* conversión */
  --sv-compra: #FF5B23;
  --sv-compra-hover: #E84A14;
  --sv-texto-sobre-compra: #1D1C18;
  /* información */
  --sv-info: #7C8FFF;             /* sobre oscuro, rellenos con texto navy y halos de foco */
  --sv-info-texto: #2446E8;       /* links y selección sobre claro */
  --sv-info-tinte: #ECEFFE;
  /* confianza y alerta */
  --sv-ok: #067647;
  --sv-ok-tinte: #E6F4EC;
  --sv-alerta: #B42318;           /* escasez, error, devolución y plazo vencido */
  --sv-alerta-tinte: #FEF0EE;

  /* Fila 89: colores sueltos con nombre */
  --sv-divisor: #EFEBE3;          /* separadores, skeleton, pista de progreso */
  --sv-seleccion-tinte: #F5F7FF;  /* tarjeta de opción elegida */
  --sv-pestana: #E7E3DA;
  --sv-linea-3: #D0CABE;
  --sv-linea-4: #D9D4CA;
  --sv-sutil-2: #E9E5DD;
  --sv-info-borde: #C9D0FB;
  --sv-alerta-borde: #F4C7C0;
  --sv-marca-placeholder: #FFF1B8;
  --sv-marca-placeholder-borde: #C9A400;
  /* Un solo estilo de deshabilitado (fila 89) */
  --sv-deshabilitado-fondo: #E4DFD5;
  --sv-deshabilitado-texto: #7A766E;

  /* Foco (Anexo 5 fila 92) */
  --sv-foco: #2446E8;
  --sv-foco-oscuro: #7C8FFF;
  --sv-halo: 0 0 0 4px rgba(124, 143, 255, .25);

  /* 03 · Tipografía (desktop; mobile abajo) */
  --sv-fuente: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sv-fuente-mono: ui-monospace, Menlo, Consolas, monospace;   /* solo #SVT y tickets */
  --sv-fs-display: 62px;        --sv-lh-display: 1;           --sv-ls-display: -.04em;
  --sv-fs-titulo-pagina: 40px;  --sv-lh-titulo-pagina: 1.1;   --sv-ls-titulo-pagina: -.035em;
  --sv-fs-titulo-seccion: 30px; --sv-lh-titulo-seccion: 1.15; --sv-ls-titulo-seccion: -.03em;
  --sv-fs-subtitulo: 20px;      --sv-lh-subtitulo: 1.25;      --sv-ls-subtitulo: -.02em;
  --sv-fs-cuerpo-grande: 18px;  --sv-lh-cuerpo-grande: 1.55;
  --sv-fs-cuerpo: 16px;         --sv-lh-cuerpo: 1.5;
  --sv-fs-chico: 14px;          --sv-lh-chico: 1.45;
  --sv-fs-precio-xl: 46px;      --sv-ls-precio-xl: -.035em;
  --sv-fs-precio-tarjeta: 22px; --sv-ls-precio-tarjeta: -.025em;
  --sv-fs-pedido: 22px;         --sv-ls-pedido: .02em;

  /* 04 · Espaciado (base 4), radios y sombras */
  --sv-e-1: 4px;  --sv-e-2: 8px;  --sv-e-3: 12px; --sv-e-4: 16px; --sv-e-5: 20px;
  --sv-e-6: 24px; --sv-e-8: 32px; --sv-e-10: 40px; --sv-e-16: 64px; --sv-e-24: 96px;
  --sv-margen: 40px;            /* margen lateral desktop; 16 en mobile */
  --sv-r-chip: 8px;
  --sv-r-campo: 12px;
  --sv-r-boton: 14px;
  --sv-r-tarjeta: 20px;
  --sv-r-bloque: 28px;
  --sv-r-pastilla: 999px;
  --sv-sombra-tarjeta: 0 18px 40px -20px rgba(15, 20, 51, .35);
  --sv-sombra-compra: 0 14px 30px -12px rgba(255, 91, 35, .75);
  --sv-sombra-compra-hover: 0 18px 34px -12px rgba(255, 91, 35, .85);
  --sv-sombra-compra-icono: 0 6px 14px -6px rgba(255, 91, 35, .7);
  --sv-sombra-drawer: -30px 0 60px -20px rgba(15, 20, 51, .45);
  --sv-sombra-barra: 0 -10px 30px -12px rgba(15, 20, 51, .25);
  --sv-sombra-chip: 0 2px 8px rgba(15, 20, 51, .15);

  /* Botones (SD 06, Anexo 5 fila 88): CTA 60/56, radio 14; neutros 52; ícono 44 */
  --sv-alto-cta: 60px;
  --sv-alto-boton: 52px;
  --sv-alto-campo: 52px;
  --sv-tactil: 44px;
}

@media (max-width: 1023px) {
  :root {
    --sv-fs-display: 31px;        --sv-lh-display: 1.04;
    --sv-fs-titulo-pagina: 25px;  --sv-lh-titulo-pagina: 1.15;
    --sv-fs-titulo-seccion: 22px; --sv-lh-titulo-seccion: 1.2;
    --sv-fs-subtitulo: 18px;
    --sv-fs-cuerpo-grande: 15px;  --sv-lh-cuerpo-grande: 1.5;
    --sv-fs-chico: 13.5px;
    --sv-fs-precio-xl: 35px;
    --sv-fs-precio-tarjeta: 18px;
    --sv-fs-pedido: 19px;
    --sv-margen: 16px;
    --sv-alto-cta: 56px;
  }
}