/* Tokens de diseño — Anteojos Del Chino
 *
 * Extraídos del tema "Anteojos Verde Rebrand v1" que está en producción, para
 * que la tienda nueva se vea igual que la actual y el cambio de plataforma no
 * se note. Los valores vienen de theme/assets/anteojos-brand.css y de los
 * color_schemes de settings_data.json.
 *
 * Cualquier color nuevo se define acá, no suelto en las plantillas.
 */

:root {
  /* --- Marca --------------------------------------------------------- */
  --verde: #068b76;          /* principal — botones, acentos, títulos */
  --verde-oscuro: #057266;   /* hover / activo */
  --verde-claro: #53afa4;    /* fondos suaves (scheme-5) */
  --amarillo: #fce477;       /* acento puntual: ofertas, destacados */

  /* --- Neutros ------------------------------------------------------- */
  --tinta: #121212;          /* texto principal */
  --tinta-suave: #6a6a6a;    /* texto secundario */
  --papel: #ffffff;
  --gris: #f3f3f3;           /* fondos de sección */
  --gris-borde: #e5e5e5;
  --rojo: #b90000;           /* errores, agotado */

  /* --- Roles --------------------------------------------------------- */
  --fondo: var(--papel);
  --texto: var(--tinta);
  --texto-suave: var(--tinta-suave);
  --borde: var(--gris-borde);
  --acento: var(--verde);
  --acento-hover: var(--verde-oscuro);

  /* --- Tipografía ---------------------------------------------------- */
  /* Bebas Neue es condensada y sólo tiene mayúsculas: sirve para titulares,
     nunca para texto corrido. */
  --fuente-titular: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --fuente-cuerpo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                   Roboto, Helvetica, Arial, sans-serif;

  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-base: 1rem;
  --texto-lg: 1.125rem;
  --texto-xl: 1.375rem;
  --titulo-sm: 1.75rem;
  --titulo-md: 2.25rem;
  --titulo-lg: 3rem;
  --titulo-xl: 4rem;

  --interlinea-apretada: 1.15;
  --interlinea: 1.55;

  /* --- Espaciado ----------------------------------------------------- */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4rem;
  --e9: 6rem;

  /* --- Formas -------------------------------------------------------- */
  --radio-sm: 4px;
  --radio: 8px;
  --radio-lg: 16px;
  --radio-pastilla: 999px;

  --sombra-sm: 0 1px 3px rgba(0, 0, 0, 0.07);
  --sombra: 0 4px 14px rgba(0, 0, 0, 0.08);
  --sombra-verde: 0 2px 6px rgba(6, 139, 118, 0.25);

  /* --- Disposición --------------------------------------------------- */
  --ancho-max: 1400px;
  --ancho-texto: 65ch;
  --alto-header: 72px;

  --transicion: 0.15s ease;
}

@media (min-width: 750px) {
  :root {
    --alto-header: 88px;
  }
}