/* =========================================================
   tokens-sugoi.css — Piel SUGOI (por defecto)
   Todas las variables del sistema visual. Ningún color,
   tipografía, radio o espacio debe quedar fuera de aquí.

   O26 (6-oct-2026): la paleta deja de ser la de la landing de
   Candy (marfil / burdeos / vino / dorado) y pasa a ser la
   identidad corporativa de Sugoi: los colores del logo.
   Logo de origen: assets/images/logo-sugoi.webp (descargado de
   tienda.proyectosugoi.com/wp-content/uploads/2026/08/
   logo-sugoi-tienda-v2.webp). Hex medidos por muestreo de píxeles
   (scripts/o26_logo_colors.cjs):
     azul dominante  #1d3184   (54,7 % del logo)
     rojo-naranja    #f73310   (11,7 %)
     naranja         #fc8909   (32,0 %)
     amarillo        #fcb604
     verde           #029512   (1,7 %)
   ========================================================= */

/* --- Tipografías (autoalojadas, variables, rango latin) --- */
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/fraunces-var.woff2') format('woff2');
}
@font-face{
  font-family:'Libre Franklin';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/librefranklin-var.woff2') format('woff2');
}

:root{
  /* Tipografía */
  --sg-font-display:'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sg-font-body:'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Color — blanco / tinta (las fotos de producto van sobre blanco) */
  --sg-bg:#ffffff;
  --sg-surface:#ffffff;
  --sg-surface-2:#f3f6fc;   /* gris muy claro, con sesgo azul del logo */
  --sg-surface-3:#e8eef8;
  --sg-ink:#14161f;         /* texto casi negro */
  --sg-ink-soft:#4b5263;
  --sg-ink-faint:#8a92a4;
  --sg-line:#e3e8f1;
  --sg-line-strong:#ccd5e5;

  /* Acentos (colores del logo de Sugoi) */
  --sg-accent:#1d3184;       /* principal: azul del logo */
  --sg-accent-2:#ea4a12;     /* acento: rojo-naranja del logo */
  --sg-accent-hover:#16266a; /* azul, más oscuro para hover */
  --sg-gold:#f2b705;         /* amarillo del logo: solo detalles pequeños */
  --sg-sage:#0a8c30;         /* verde del logo: solo detalles pequeños */
  --sg-on-accent:#ffffff;
  --sg-danger:#d32f2f;
  /* Línea translúcida para superficies oscuras (pie), sin literales en los componentes */
  --sg-hairline-on-dark:rgba(255,255,255,.18);

  /* Radios */
  --sg-radius:18px;
  --sg-radius-sm:10px;
  --sg-radius-lg:24px;
  --sg-radius-pill:999px;

  /* Espacios */
  --sg-space-1:.25rem;
  --sg-space-2:.5rem;
  --sg-space-3:.75rem;
  --sg-space-4:1rem;
  --sg-space-5:1.5rem;
  --sg-space-6:2rem;
  --sg-space-7:3rem;
  --sg-space-8:4rem;

  /* Sombra y foco */
  --sg-shadow:0 10px 30px rgba(20,22,31,.08);
  --sg-shadow-sm:0 2px 10px rgba(20,22,31,.06);
  --sg-focus:0 0 0 3px rgba(29,49,132,.28);

  /* Medidas */
  --sg-container:1200px;
  --sg-header-h:118px;
  --sg-touch:48px;

  /* Acento por colección (se puede sobreescribir por ficha) */
  --sg-collection-accent:var(--sg-accent);
}