/* =========================================================
   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, paralelogramos, 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;
  --radius-buho: 0; /* Fastura no usa el "D"; usa shear */
}

/* Fastura motif: paralelogramo / slash */
.fastura-slash {
  display: inline-block;
  width: 24px; height: 24px;
  background: var(--fastura-teal);
  transform: skewX(-18deg);
  position: relative;
}
.fastura-slash--teal { background: var(--fastura-amber); }
.fastura-slash--dark { background: var(--fastura-navy); }

/* Logo Fastura: dos paralelogramos apilados (teal + ámbar) sobre navy */
.logo-fastura {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--fastura-navy);
  letter-spacing: -0.02em;
  font-size: 22px;
}
.logo-fastura .stack {
  width: 36px; height: 30px;
  position: relative;
  flex-shrink: 0;
}
.logo-fastura .stack::before,
.logo-fastura .stack::after {
  content: "";
  position: absolute;
  width: 30px; height: 10px;
  transform: skewX(-22deg);
}
.logo-fastura .stack::before {
  top: 2px; left: 2px;
  background: var(--fastura-teal);
}
.logo-fastura .stack::after {
  bottom: 2px; right: 2px;
  background: var(--fastura-amber);
}

/* 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:    #F4F4EE;
  --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;
  --radius-buho: 0 0 60px 0;
}

/* Logo Waya: isotipo búho (compartido) recoloreado en lima + wordmark */
.logo-waya {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 700;
  color: #001144;
  font-size: 26px;
  letter-spacing: -0.03em;
}
.logo-waya .mark {
  width: 34px; height: 28px;
  flex-shrink: 0;
  background: url(logos/isotipo-waya.svg) center / contain no-repeat;
}
/* sobre oscuro: usa la variante con inner blanco */
.logo-waya--light { color: #fff; }
.logo-waya--light .mark {
  background-image: url(logos/isotipo-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);
}