/* ============================================================
 * NECORA PRO – GAMMA Sync Layer (Global Tokens Enforcement v2.5 POLISHED + CARDS)
 * ============================================================
 * ✅ Tokens base coherentes con Dynamic CSS y Live Preview
 * ✅ Header/Glass y Links sincronizados con Customizer Gamma
 * ✅ Hover de enlaces y botones coherente con modo claro/oscuro
 * ✅ Fallback seguro + compatibilidad WP 6.7 / PHP 8.2+
 * ✅ Alias para colores primario/secundario en blocks
 * ✅ Tokens base para cards premium (estilo One-Off / Iceland)
 * ============================================================ */

:root {
  /* Base Light */
  --bg-color: #ffffff;
  --text-color: #0f172a;
  --glass-bg: rgba(255, 255, 255, .55);
  --accent-color: #00c9a7;
  --accent-text: #ffffff;

  /* 🎯 Alias globales para blocks */
  /* Primario = accent actual (Customizer/Dynamic CSS lo sobreescribe) */
  --primary-color: var(--accent-color);

  /* Secundario:
     - Si Dynamic CSS define --accent-secondary, se usa ese valor
     - Si no, se genera un tono a partir del primario            */
  --accent-secondary: color-mix(in srgb, var(--accent-color) 40%, #000 0%);
  --secondary-color: var(--accent-secondary);

  /* Cards base (se adaptan según bg/light/dark) */
  --card-radius-lg: 24px;
  --card-radius-md: 18px;
  --card-bg-soft: color-mix(in srgb, var(--bg-color) 90%, #000 10%);
  --card-bg-strong: color-mix(in srgb, var(--bg-color) 80%, #000 20%);
  --card-shadow-soft: 0 24px 60px rgba(15, 23, 42, .22);

  /* 🔹 Enlaces con fallback si Dynamic CSS no cargara */
  --link-color: var(--accent-color);
  --link-hover-color: var(--header-accent, var(--accent-color));

  /* Header */
  --header-accent: var(--accent-color);
  --header-text: var(--text-color);

  /* Hero */
  --hero-overlay-light: rgba(0, 0, 0, 0.25);
  --hero-overlay-dark: rgba(255, 255, 255, 0.15);
  --hero-overlay-color: var(--hero-overlay-light);
}

[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #0f172a;
  --glass-bg: rgba(255, 255, 255, .55);
  --accent-color: #00c9a7;

  /* Alias siguen apuntando al accent definido por el Customizer */
  --primary-color: var(--accent-color);
  --accent-secondary: color-mix(in srgb, var(--accent-color) 40%, #000 0%);
  --secondary-color: var(--accent-secondary);

  --card-bg-soft: color-mix(in srgb, var(--bg-color) 90%, #000 10%);
  --card-bg-strong: color-mix(in srgb, var(--bg-color) 80%, #000 20%);
  --card-shadow-soft: 0 24px 60px rgba(15, 23, 42, .22);

  --header-accent: var(--accent-color);
  --header-text: var(--text-color);
  --hero-overlay-color: var(--hero-overlay-light);

  /* opcional, pero mantiene coherencia si no hay Dynamic CSS */
  --link-color: var(--accent-color);
  --link-hover-color: var(--header-accent);
}

[data-theme="dark"] {
  --bg-color: #0f172a;
  --text-color: #f5f5f5;
  --glass-bg: rgba(15, 23, 42, .45);
  --accent-color: #00c9a7;

  /* En dark el secundario se hace un poco más claro para contraste */
  --primary-color: var(--accent-color);
  --accent-secondary: color-mix(in srgb, var(--accent-color) 55%, #ffffff 15%);
  --secondary-color: var(--accent-secondary);

  --card-bg-soft: color-mix(in srgb, #020617 70%, var(--accent-color) 0%);
  --card-bg-strong: #020617;
  --card-shadow-soft: 0 28px 70px rgba(0, 0, 0, .80);

  --header-accent: var(--accent-color);
  --header-text: var(--text-color);
  --hero-overlay-color: var(--hero-overlay-dark);

  /* igual aquí, Dynamic CSS luego sobreescribe con los valores Gamma */
  --link-color: var(--accent-color);
  --link-hover-color: var(--header-accent);
}

/* ============================================================
 * BASE
 * ============================================================ */
html,
body {
  background: var(--bg-color);
  color: var(--text-color);
  transition: background .35s ease, color .35s ease;
}

/* ============================================================
 * LINKS / ENLACES GLOBALES
 * ============================================================ */
/* 🔹 AHORA usan --link-color y --link-hover-color, con fallback */
a {
  color: var(--link-color, var(--accent-color));
  text-decoration: none;
  transition: color .2s ease;
}

a:hover,
a:focus {
  color: var(--link-hover-color, var(--header-accent));
}

a:active {
  color: color-mix(
    in srgb,
    var(--link-hover-color, var(--accent-color)) 80%,
    #000
  );
}

/* ============================================================
 * HEADER / GLASS
 * ============================================================ */
.site-header.glass,
.site-header.glass .nav-shell::before,
.offcanvas-nav,
.site-header.glass .nav-pill > li > ul {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--header-blur, 20px)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--header-blur, 20px)) saturate(180%);
}

.site-header.glass,
.site-header.glass .nav-list a,
.site-header.glass .nav-right button,
.site-header.glass .header-cart,
.site-header.glass .search-toggle,
.site-header.glass .menu-toggle {
  color: var(--header-text);
  transition: color .25s ease;
}

/* --- Header Accent dinámico (sin bloquear JS) --- */
.site-header.glass a:hover,
.site-header.glass .nav-list a:hover,
.site-header.glass .header-cart:hover {
  color: var(--header-accent);
}

/* ============================================================
 * BOTONES GLOBALES
 * ============================================================ */
:root { --btn-radius: .6rem; }

.button,
.btn,
button,
.btn-primary,
.wp-element-button,
.wp-block-button__link,
.wc-block-button .wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button {
  background: var(--accent-color);
  color: var(--accent-text);
  border-color: transparent;
  border-radius: var(--btn-radius);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.button:hover,
.wp-block-button__link:not(.is-style-outline):hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

/* ============================================================
 * HERO
 * ============================================================ */
.hero,
.hero-section,
.hero-swiper,
.hero-landing,
.hero-content {
  color: var(--text-color);
  background: transparent;
  transition: background .3s ease, color .3s ease;
}

.hero-title,
.hero__title,
.hero .title,
.hero-heading,
.hero-subtitle,
.hero__subtitle,
.hero .subtitle,
.hero-lead {
  color: var(--text-color);
  transition: color .3s ease;
}

.hero-overlay {
  background-color: var(--hero-overlay-color);
  transition: background-color .3s ease;
}

/* ============================================================
 * CUSTOMIZER PREVIEW FIXES
 * ============================================================ */
body.wp-customizer-preview {
  background: var(--bg-color) !important;
}

body.wp-customizer-preview .site-header.glass,
body.wp-customizer-preview .nav-shell::before {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--header-blur, 20px)) saturate(180%) !important;
}

/* ============================================================
 * LIVE GAMMA FUSION – INLINE SAFE
 * ============================================================ */
/* Permite al JS del Customizer reescribir --header-accent en vivo */
.site-header.glass {
  --header-accent: var(--accent-color);
}