@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300..600&family=Inter:wght@400..600&family=Newsreader:opsz,wght@6..72,400..600&family=Outfit:wght@300..600&display=swap');

/* ==========================================
   YZG STUDIO - ESTILOS DE INTERFAZ
   Capa opcional: html[data-ui-style="..."] cambia las variables de color,
   fondo y tipografía de toda la app. "yzg" (por defecto) no cambia nada.
   Sin brillos de neón: el resplandor se apaga en los estilos nuevos.
   ========================================== */

html[data-ui-style="arena"] {
  --bg: #0f0f10;
  --panel-bg: #111113;
  --surface: #18181b;
  --surface-hover: #222226;
  --border: rgba(255, 255, 255, 0.1);
  --border-hover: rgba(255, 255, 255, 0.2);
  --text-primary: #e5e7eb;
  --text-secondary: #8b8b93;
  --accent: #e5e7eb;
  --accent-hover: #ffffff;
  --accent-bg: rgba(229, 231, 235, 0.1);
  --accent-glow: none;
  --font-family: 'Geist', 'Inter', system-ui, sans-serif;
  --font-track: -0.005em;
}

html[data-ui-style="chatgpt"] {
  --bg: #212121;
  --panel-bg: #171717;
  --surface: #2f2f2f;
  --surface-hover: #3a3a3a;
  --border: rgba(255, 255, 255, 0.1);
  --border-hover: rgba(255, 255, 255, 0.18);
  --text-primary: #ececec;
  --text-secondary: #9b9b9b;
  --accent: #10a37f;
  --accent-hover: #1ec49a;
  --accent-bg: rgba(16, 163, 127, 0.14);
  --accent-glow: none;
  --font-family: 'Inter', system-ui, sans-serif;
  --font-track: -0.01em;
}

html[data-ui-style="claude"] {
  --bg: #262624;
  --panel-bg: #1f1e1d;
  --surface: #30302e;
  --surface-hover: #3a3936;
  --border: rgba(240, 238, 230, 0.1);
  --border-hover: rgba(240, 238, 230, 0.2);
  --text-primary: #f0eee6;
  --text-secondary: #a8a59a;
  --accent: #d97757;
  --accent-hover: #e38b6d;
  --accent-bg: rgba(217, 119, 87, 0.14);
  --accent-glow: none;
  --font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-track: 0.005em;
}

html[data-ui-style="gemini"] {
  --bg: #131314;
  --panel-bg: #1e1f20;
  --surface: #282a2c;
  --surface-hover: #333537;
  --border: rgba(255, 255, 255, 0.1);
  --border-hover: rgba(255, 255, 255, 0.18);
  --text-primary: #e3e3e3;
  --text-secondary: #9aa0a6;
  --accent: #8ab4f8;
  --accent-hover: #aecbfa;
  --accent-bg: rgba(138, 180, 248, 0.14);
  --accent-glow: none;
  --font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  --font-track: 0;
}

/* Transición suave al cambiar de estilo */
html[data-ui-style] body,
html[data-ui-style] .sidebar,
html[data-ui-style] .params-panel {
  transition: background-color 0.6s ease, color 0.6s ease, border-color 0.6s ease;
}

html[data-ui-style] body {
  letter-spacing: var(--font-track, 0);
}

/* ==========================================
   CUBO (viñeta) según el estilo: colores del degradado del icono
   ========================================== */

/* Arena: blanco suave, sin brillo */
html[data-ui-style="arena"] .yzg-cube stop:nth-child(1) { stop-color: #e5e7eb; }
html[data-ui-style="arena"] .yzg-cube stop:nth-child(2) { stop-color: #8e8e96; }

/* ChatGPT: verde con un toque de blanco */
html[data-ui-style="chatgpt"] .yzg-cube stop:nth-child(1) { stop-color: #10a37f; }
html[data-ui-style="chatgpt"] .yzg-cube stop:nth-child(2) { stop-color: #d9f5ec; }

/* Claude: café terracota */
html[data-ui-style="claude"] .yzg-cube stop:nth-child(1) { stop-color: #d97757; }
html[data-ui-style="claude"] .yzg-cube stop:nth-child(2) { stop-color: #8c5a3c; }

/* Gemini: colores del logo (rojo, azul) */
html[data-ui-style="gemini"] .yzg-cube stop:nth-child(1) { stop-color: #ea4335; }
html[data-ui-style="gemini"] .yzg-cube stop:nth-child(2) { stop-color: #4285f4; }

/* Gemini: degradado de 4 colores del logo (rojo, amarillo, verde, azul).
   Definido en index.html (#yzgGemini); el trazo se toma de ahí en este estilo. */
html[data-ui-style="gemini"] .yzg-cube path { stroke: url(#yzgGemini); }