/* =========================================================
   Digital Buho — Brand Themes
   House of brands: each product overrides semantic tokens.
   Usage: wrap any subtree in <div class="theme-fastura">...</div>
   ========================================================= */

/* ---------- FASTURA ---------- */
/* Teal vivo + ámbar cálido sobre navy. Geometría recta, B2B. */
.theme-fastura {
  /* Paleta Fastura */
  --fastura-navy:   #001144;  /* logotipo principal */
  --fastura-navy-h: #0A2061;  /* hover navy */
  --fastura-teal:   #00BFA5;  /* isotipo · acento principal (vivo, sobre navy) */
  --fastura-teal-d: #00736A;  /* hover de acción */
  --fastura-teal-ink: #00796B;/* legible: texto/líneas finas sobre claro */
  --fastura-teal-l: #CFEFE9;  /* tinte suave (fondos) */
  --fastura-amber:  #FFB400;  /* complemento (vivo, sobre navy) */
  --fastura-amber-d:#E09E00;  /* hover */
  --fastura-amber-ink: #946400;/* legible: texto/líneas finas sobre claro */
  --fastura-amber-l:#FFE8B0;  /* tinte suave (fondos) */
  --fastura-bg:     #F4F8F8;
  --fastura-ink:    #001144;

  /* Overrides semánticos */
  --color-primary:        var(--fastura-navy);
  --color-primary-hover:  var(--fastura-navy-h);
  --color-primary-contrast: #fff;

  --color-accent:         var(--fastura-teal);
  --color-accent-hover:   var(--fastura-teal-d);
  --color-accent-subtle:  var(--fastura-teal-l);

  --color-brand-blue:     var(--fastura-teal-d);
  --color-brand-blue-subtle: var(--fastura-teal-l);

  --color-bg-subtle:      var(--fastura-bg);
  --color-text:           var(--fastura-ink);

  --shadow-glow-pink: 0 8px 32px rgba(0, 191, 165, 0.30);
  --shadow-glow-blue: 0 8px 32px rgba(0, 17, 68, 0.22);
  --shadow-focus-ring: 0 0 0 3px rgba(0, 191, 165, 0.30);

  /* Radios: Fastura usa geometría más recta */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 14px;
}

/* Fastura no tiene motivo de firma propio: usa la geometría recta del sistema
   (radios pequeños) + el isotipo búho compartido. El slash/paralelogramo se retiró. */

/* Botones Fastura: cuadrados, tipo industrial */
.theme-fastura .btn { border-radius: var(--radius-sm); letter-spacing: 0.02em; }
.theme-fastura .btn--accent {
  background: var(--fastura-teal);
  color: var(--fastura-navy);
  font-weight: 700;
}
.theme-fastura .btn--accent:hover { background: var(--fastura-teal-d); color: #fff; }
.theme-fastura .btn--primary {
  background: var(--fastura-navy);
  color: #fff;
}

/* Cards Fastura: más rectos, con detalle lime en borde o accent */
.theme-fastura .card { border-radius: var(--radius-lg); }

/* ---------- WAYA ---------- */
/* Verde-lima + violeta, generoso, amable. Muy redondeado (pill/rounded). */
.theme-waya {
  --waya-green:    #8FD400;   /* isotipo · acento principal (vivo, sobre navy) */
  --waya-green-d:  #74AD00;   /* hover de acción */
  --waya-green-ink:#557A00;   /* legible: texto/líneas finas sobre claro */
  --waya-green-l:  #B6E84D;   /* tinte suave (fondos) */
  --waya-purple:   #6D4AFF;   /* complemento — legible sobre claro Y oscuro */
  --waya-purple-d: #5333E0;
  --waya-purple-l: #9B82FF;
  --waya-cream:    #F5F6F7;
  --waya-ink:      #001144;   /* texto/estructura = navy de la casa */

  --color-primary:        var(--waya-ink);   /* navy: base/estructura */
  --color-primary-hover:  #0A2061;
  --color-primary-contrast: #fff;

  --color-accent:         var(--waya-green); /* lima: acción principal */
  --color-accent-hover:   var(--waya-green-d);
  --color-accent-subtle:  #E4FBE1;

  --color-brand-blue:     var(--waya-purple); /* violeta: complemento/realce */
  --color-brand-blue-subtle: #ECE4FB;

  --color-bg-subtle:      var(--waya-cream);
  --color-text:           var(--waya-ink);

  --shadow-glow-pink: 0 10px 36px rgba(143, 212, 0, 0.32);
  --shadow-glow-blue: 0 10px 36px rgba(109, 74, 255, 0.28);
  --shadow-focus-ring: 0 0 0 3px rgba(109, 74, 255, 0.22);

  /* Radios: Waya todo más redondo */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
}

/* Logo Waya: logotipo oficial vectorizado (ojo + letras a medida). Usar el SVG completo. */
.logo-waya {
  display: inline-block;
  height: 32px;
  aspect-ratio: 2007 / 559;
  background: url(logos/Waya.svg) left center / contain no-repeat;
  font-size: 0;  /* oculta cualquier texto de respaldo */
}
/* sobre oscuro: versión light = todo blanco (contorno blanco, iris transparente) */
.logo-waya--light {
  background-image: url(logos/Waya-light.svg);
}

.theme-waya .btn { border-radius: 9999px; font-weight: 700; }
.theme-waya .btn--primary {
  background: var(--waya-purple);
  color: #fff;
}
.theme-waya .btn--accent {
  background: var(--waya-green);
  color: var(--waya-ink);
}
.theme-waya .card { border-radius: var(--radius-xl); }

/* ---------- BUHO CORE ---------- */
/* La marca paraguas. Se usa para buho.la y como default. */
.theme-buho {
  --color-primary: var(--buho-navy-950);
  --color-primary-hover: var(--buho-navy-900);
  --color-accent: var(--buho-pink-600);
  --color-accent-hover: var(--buho-pink-700);
  --color-brand-blue: var(--buho-blue-600);
}

/* =========================================================
   Chips de marca (para navegación entre productos)
   ========================================================= */
.brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--white);
  border: 1px solid var(--color-border);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.brand-chip:hover { border-color: var(--gray-500); }
.brand-chip--active {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border-color: transparent;
}
.brand-chip .swatches {
  display: inline-flex;
  gap: 2px;
}
.brand-chip .swatches span {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.08);
}