:root {
  /* Corporativos */
  --sb-ink: #19110D;
  --sb-sap: #FFA400;
  --sb-salmon: #E1464A;
  --sb-terracota: #D58526;

  /* Variantes legibles (AA sobre lino) */
  --sb-sap-ink: #8F5C00;
  --sb-salmon-ink: #B92F33;
  --sb-terracota-ink: #B76A1E;
  --sb-terracota-deep: #96560F;

  /* Derivados */
  --sb-moss: #6B4A12;
  --sb-moss-deep: #4A3208;
  --sb-linen: #F4F0E6;
  --sb-linen-deep: #E9E2D4;
  --sb-card: #FAF7F0;
  --sb-muted: #EDE7DA;
  --sb-muted-fg: #6B6155;
  --sb-border: #DED6C6;
  --sb-peach: #F7B983;

  /* Grises del rediseño de la portada (28/08). La foto pone el color;
     el resto de la página se sostiene en gris. */
  --sb-gris-90: #1F1E1C;
  --sb-gris-70: #4A4844;
  --sb-gris-50: #7A776F;
  --sb-gris-30: #B4B0A7;
  --sb-gris-14: #E2E0DA;
  --sb-gris-7:  #F2F1EC;
  --sb-blanco:  #FBFAF8;

  /* Los tres de Instagram, bajados de saturación para usarlos en pequeño */
  --sb-menta:    #6FC3A2;
  --sb-amarillo: #EFC463;
  --sb-coral:    #DE7B80;

  /* Pares superficie / texto */
  --sb-surface-brand: var(--sb-sap);
  --sb-surface-brand-hover: #E09000;
  --sb-surface-brand-fg: var(--sb-ink);
  /* El amarillo a plena potencia solo vale de acento: para superficies grandes,
     este lavado sobre lino. Mismo criterio que --sb-surface-accent-soft. */
  --sb-surface-brand-soft: color-mix(in oklab, var(--sb-sap) 22%, var(--sb-linen));
  --sb-surface-brand-soft-fg: var(--sb-ink);
  --sb-surface-dark: var(--sb-ink);
  --sb-surface-dark-fg: var(--sb-linen);
  --sb-surface-dark-muted: #BDB4A6;
  --sb-surface-dark-border: rgba(244, 240, 230, 0.25);
  --sb-surface-warm: var(--sb-terracota);
  --sb-surface-warm-fg: var(--sb-ink);
  --sb-surface-warm-hover: var(--sb-terracota-ink);
  --sb-surface-warm-soft: color-mix(in oklab, var(--sb-terracota) 22%, var(--sb-linen));
  --sb-surface-warm-border: color-mix(in oklab, var(--sb-terracota-ink) 45%, transparent);
  --sb-surface-accent: var(--sb-salmon);
  --sb-surface-accent-fg: var(--sb-ink);
  /* El salmón a plena potencia canta demasiado en superficies grandes:
     para esas va este lavado, que mantiene el color sin gritar. */
  --sb-surface-accent-soft: color-mix(in oklab, var(--sb-salmon) 20%, var(--sb-linen));
  --sb-surface-accent-soft-fg: var(--sb-ink);
  --sb-surface-soft: var(--sb-peach);
  --sb-surface-soft-fg: var(--sb-ink);

  /* Las cajas grandes de las páginas interiores: la calculadora de tallas, la
     ayuda de las preguntas frecuentes, el formulario de distribuidores y la
     newsletter de la portada. Blancas sobre lino, con un filete que las separa. */
  --sb-caja: var(--sb-blanco);
  --sb-caja-fg: var(--sb-gris-90);
  --sb-caja-borde: color-mix(in oklab, var(--sb-gris-90) 12%, transparent);
  /* Los campos dentro de una caja blanca necesitan otro fondo para verse. */
  --sb-caja-campo: var(--sb-gris-7);

  --sb-shadow-soft: 0 18px 40px -28px rgba(31, 30, 28, 0.4);
  --sb-shadow-lift: 0 26px 60px -30px rgba(31, 30, 28, 0.45);

  --sb-font-display: "Baloo Bhaina 2", "Trebuchet MS", ui-rounded, system-ui, sans-serif;
  --sb-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --sb-ancho: 86rem;
  --sb-ancho-tienda: 80rem;
}