/* TRIVUX — Color & Type tokens
 * Fuente canónica: docs/marca-colores.md + identidad-visual.md (repo Astorgato/App-Eventos).
 * Importado desde el design system trivux (Claude Design) el 2026-07-06.
 * Soporta light + dark. Default = LIGHT (:root). Dark = [data-theme="dark"].
 * Font: Inter (400–900).
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ═══════════════════════════════════════════════════════════════
   NÚCLEO DE MARCA — idéntico en light y dark. No se intercambian.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --tx-purple:       #7B39EC; /* PRIMARIO — botón, links, "TRIVU", eyebrows */
  --tx-purple-alt:   #A855F7; /* acento secundario, badges */
  --tx-pink:         #FF2D95; /* magenta de marca — la X del wordmark, acento #1 */
  --tx-brand-green:  #39C832; /* SOLO gradiente firma / momentos party */
  --tx-green-light:  #67EB4E; /* verde claro de marca — reemplaza al verde neón eliminado */
  --tx-green:        #39C832; /* éxito / estado (checks, "vas a este evento", online) — mismo verde de marca */

  /* Estado (fuera de marca) */
  --tx-red:          #F04545;
  --tx-gold:         #F59E0B;

  /* Externos intocables */
  --tx-spotify:      #1DB954;

  --tx-white:        #FFFFFF;

  /* Gradientes de marca (dirección oficial verde→violeta→magenta) */
  --tx-brand-gradient: linear-gradient(135deg, #39C832 0%, #7B39EC 48%, #FF2D95 100%);
  --tx-text-gradient:  linear-gradient(110deg, #7B39EC, #FF2D95);
  --tx-protect-gradient: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.72) 100%);

  /* ── Espaciado ── */
  --tx-s-xs:  4px;  --tx-s-sm:  8px;  --tx-s-md: 16px;
  --tx-s-lg: 24px;  --tx-s-xl: 32px;  --tx-s-xxl:48px;

  /* ── Radios ── */
  --tx-r-sm:  8px;  --tx-r-md: 12px;  --tx-r-lg: 16px;
  --tx-r-xl: 24px;  --tx-r-full: 999px;

  /* ── Type ── */
  --tx-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT (default) — valores de marca-colores.md §light
   ═══════════════════════════════════════════════════════════════ */
:root {
  --tx-bg:           #FAFAFC; /* fondo página */
  --tx-deep-bg:      #F3F0FA; /* atenuado / lavanda (hero suave) */
  --tx-nav-bg:       #FFFFFF; /* tab bar interior */
  --tx-surface:      #FFFFFF; /* card / superficie */
  --tx-card:         #FFFFFF;
  --tx-input:        #F0EBFB; /* campos de formulario */
  --tx-border:       #E5E0F0; /* hairline */

  --tx-purple-light: #7B39EC; /* links / label activo (en light = el morado) */
  --tx-purple-dim:   #EDE5FB; /* relleno atenuado de íconos/badges morados */
  --tx-purple-active:#D9C8F8; /* bordes / estado activo */

  --tx-text-prim:    #1A1326; /* texto principal */
  --tx-text-sec:     #6B6478; /* texto secundario */
  --tx-text-mute:    #9B95A8; /* texto atenuado */
  --tx-text-light:   #4A4458; /* texto suave (sobre botón secundario) */

  --tx-shadow-card:    0 1px 3px rgba(26,19,38,0.06), 0 1px 2px rgba(26,19,38,0.04);
  --tx-shadow-float:   0 8px 24px rgba(123,57,236,0.12);
  --tx-shadow-btn:     0 4px 10px rgba(26,19,38,0.10);
  --tx-shadow-purple:  0 8px 22px rgba(123,57,236,0.28);

  --tx-cover-fallback: linear-gradient(180deg, #EDE5FB 0%, #F0EBFB 100%);
  --tx-overlay:        rgba(26,19,38,0.45);
  --tx-scrim:          rgba(255,255,255,0.7);
  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════════
   DARK — valores del theme.ts de la app (fondo nocturno)
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --tx-bg:           #07050E;
  --tx-deep-bg:      #0C021E;
  --tx-nav-bg:       #0C0118;
  --tx-surface:      #161620;
  --tx-card:         #161620;
  --tx-input:        #190C2D;
  --tx-border:       #1E1E2E;

  --tx-purple-light: #BF80FC;
  --tx-purple-dim:   #1A0738;
  --tx-purple-active:#331959;

  --tx-text-prim:    #F0F0F5;
  --tx-text-sec:     #888888;
  --tx-text-mute:    #444444;
  --tx-text-light:   #CCC6D8;

  --tx-shadow-card:    none;
  --tx-shadow-float:   0 8px 20px rgba(0,0,0,0.5);
  --tx-shadow-btn:     0 4px 8px rgba(0,0,0,0.35);
  --tx-shadow-purple:  0 6px 24px rgba(123,57,236,0.55);

  --tx-cover-fallback: linear-gradient(180deg, #1a0845 0%, #0a0420 100%);
  --tx-overlay:        rgba(0,0,0,0.6);
  --tx-scrim:          rgba(7,5,14,0.7);
  color-scheme: dark;
}

/* ── Wordmark ───────────────────────────────────────────────── */
/* En light: "TRIVU" morado; en dark: "TRIVU" blanco. X siempre magenta. */
.tx-wordmark {
  font-family: var(--tx-font);
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--tx-purple);
}
[data-theme="dark"] .tx-wordmark { color: var(--tx-white); }
.tx-wordmark .x { color: var(--tx-pink); }

/* Variante gradiente (una sola palabra de un titular, nunca líneas largas) */
.tx-text-gradient {
  background: var(--tx-text-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ── Escala tipográfica ─────────────────────────────────────── */
.tx-display  { font-size: clamp(38px, 8vw, 64px); font-weight: 900; letter-spacing: -0.035em; line-height: 1.02; color: var(--tx-text-prim); }
.tx-h1      { font-size: 24px; font-weight: 800; line-height: 1.2; color: var(--tx-text-prim); letter-spacing: -0.02em; }
.tx-h2      { font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--tx-text-prim); letter-spacing: -0.015em; }
.tx-h3      { font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--tx-text-light); }
.tx-section { font-size: 15px; font-weight: 700; color: var(--tx-text-prim); }
.tx-body    { font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--tx-text-prim); }
.tx-body-sec{ font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--tx-text-sec); }
.tx-small   { font-size: 12px; font-weight: 500; color: var(--tx-text-sec); }
.tx-meta    { font-size: 11px; font-weight: 400; color: var(--tx-text-mute); }
.tx-micro   { font-size: 10px; font-weight: 500; color: var(--tx-text-mute); }

.tx-label-upper {
  font-size: 11px;
  font-weight: 700;
  color: var(--tx-purple);
  text-transform: uppercase;
  letter-spacing: 1.6px;
}