/*
 * UNIVERSAL SIGNALS — DESIGN TOKENS
 * Fuente única de verdad. Todos los HTML cargan este archivo vía <link>.
 * v1.0 · Mayo 2026
 *
 * TEMAS:
 *   :root                  → Tema por defecto (oscuro profundo)
 *   [data-theme="universo"] → Tema alternativo (púrpura cálido)
 *   [data-theme="vanilla"]  → Tema claro premium (blanco + violeta)
 *
 * USO:
 *   <link rel="stylesheet" href="/design-tokens.css">
 *   Para activar un tema: <html data-theme="universo">  ó  <html data-theme="vanilla">
 */

/* ============================================================
   TEMA POR DEFECTO — Oscuro profundo
   ============================================================ */

:root {
  /* Fondo y superficie */
  --bg:           #07070A;
  --bg-surface:   rgba(255,255,255,0.04);
  --bg-surface-2: rgba(255,255,255,0.08);

  /* Tipografía */
  --ink:          #F4F1EA;
  --ink-soft:     #D4D1C9;
  --ink-muted:    #8A8880;
  --ink-dim:      #6A6865;

  /* Acento y gradientes */
  --accent:       #c789ff;
  --accent-blue:  #5170ff;
  --accent-pink:  #ff66c4;
  --grad:         linear-gradient(135deg, #c789ff 0%, #ff66c4 100%);
  --grad-accent:  linear-gradient(135deg, #c789ff 0%, #ff66c4 100%);

  /* Líneas y bordes */
  --line:         rgba(244,241,234,.06);
  --line-strong:  rgba(244,241,234,.12);
  --line-accent:  rgba(199,137,255,.25);

  /* Glassmorphism */
  --glass-bg:     rgba(255,255,255,0.04);
  --glass-border: rgba(244,241,234,0.10);
  --glass-blur:   blur(24px);

  /* Sombras */
  --shadow-card:  0 32px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  --shadow-btn:   0 8px 32px rgba(81,112,255,0.35);
  --shadow-glow:  0 0 32px rgba(199,137,255,0.3);
  --fade-bottom:  rgba(10,10,16,.98);

  /* Tipografías */
  --font-display: 'Space Grotesk', sans-serif;
  --font-serif:   'Instrument Serif', serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Texto sobre botones de acento/gradiente. Blanco por defecto (temas
     oscuros con acento saturado). Los temas de acento CLARO (menta MM) lo
     sobreescriben con un tono oscuro para que el botón se lea. */
  --on-accent: #ffffff;

  /* Test — variables internas del componente TestScreen */
  --t-bg:         #07070A;
  --t-ink:        #F4F1EA;
  --t-ink-soft:   #D4D1C9;
  --t-line:       rgba(244,241,234,.08);

  /* Radios */
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    24px;
  --radius-pill:  999px;

  /* Transiciones */
  --ease-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.2s;
  --duration-mid:  0.3s;
  --duration-slow: 0.6s;
}

/* ============================================================
   TEMA UNIVERSO — Púrpura cálido
   Activar con: <html data-theme="universo">
   ============================================================ */

[data-theme="universo"] {
  /* Fondo y superficie */
  --bg:           #0a0612;
  --bg-surface:   rgba(180,120,255,0.05);
  --bg-surface-2: rgba(180,120,255,0.10);

  /* Tipografía */
  --ink:          #F0EBF8;
  --ink-soft:     #CCB8E8;
  --ink-muted:    #9070B8;
  --ink-dim:      #6A4F8A;

  /* Acento y gradientes */
  --accent:       #e0a0ff;
  --accent-blue:  #9060ff;
  --accent-pink:  #ff80d0;
  --grad:         linear-gradient(135deg, #9060ff 0%, #ff80d0 100%);
  --grad-accent:  linear-gradient(135deg, #e0a0ff 0%, #ff80d0 100%);

  /* Líneas y bordes */
  --line:         rgba(240,235,248,.07);
  --line-strong:  rgba(240,235,248,.14);
  --line-accent:  rgba(224,160,255,.30);

  /* Glassmorphism */
  --glass-bg:     rgba(180,120,255,0.06);
  --glass-border: rgba(240,235,248,0.12);
  --glass-blur:   blur(24px);

  /* Sombras */
  --shadow-card:  0 32px 80px rgba(10,6,18,0.7), inset 0 1px 0 rgba(255,255,255,0.08);
  --shadow-btn:   0 8px 32px rgba(144,96,255,0.40);
  --shadow-glow:  0 0 32px rgba(224,160,255,0.35);
  --fade-bottom:  rgba(10,6,18,0.98);

  /* Test — variables internas */
  --t-bg:         #0a0612;
  --t-ink:        #F0EBF8;
  --t-ink-soft:   #CCB8E8;
  --t-line:       rgba(240,235,248,.09);
}

/* ============================================================
   TEMA VANILLA — Modo claro premium
   Activar con: <html data-theme="vanilla">
   ============================================================ */

[data-theme="vanilla"] {
  --bg:           #FFFFFF;
  --bg-surface:   rgba(0,0,0,0.04);
  --bg-surface-2: rgba(0,0,0,0.08);

  --ink:          #0D0D0D;
  --ink-soft:     #3A3A3A;
  --ink-muted:    #6B6B6B;
  --ink-dim:      #9A9A9A;

  --accent:       #6B2FD9;
  --accent-blue:  #3B5BDB;
  --accent-pink:  #C2006F;
  --grad:         linear-gradient(135deg, #6B2FD9 0%, #C2006F 100%);
  --grad-accent:  linear-gradient(135deg, #6B2FD9 0%, #C2006F 100%);

  --line:         rgba(0,0,0,0.08);
  --line-strong:  rgba(0,0,0,0.15);
  --line-accent:  rgba(107,47,217,0.25);

  --glass-bg:     rgba(0,0,0,0.03);
  --glass-border: rgba(0,0,0,0.10);
  --glass-blur:   blur(24px);

  --shadow-card:  0 32px 80px rgba(0,0,0,0.12), inset 0 1px 0 rgba(0,0,0,0.05);
  --shadow-btn:   0 8px 32px color-mix(in srgb, var(--accent) 30%, transparent);
  --shadow-glow:  0 0 32px color-mix(in srgb, var(--accent) 35%, transparent);
  --fade-bottom:  rgba(255,255,255,.98);

  /* Estrellas del fondo: en tema claro, tinte del acento (no la tinta oscura). */
  --star-fill:    color-mix(in srgb, var(--accent) 55%, transparent);

  --t-bg:         #FFFFFF;
  --t-ink:        #0D0D0D;
  --t-ink-soft:   #3A3A3A;
  --t-line:       rgba(0,0,0,0.08);
}

[data-theme="vanilla"] .us-nav {
  background: rgba(255,255,255,0.90) !important;
  border-bottom-color: rgba(0,0,0,0.08) !important;
}

[data-theme="vanilla"] .soul-letter-card {
  background: rgba(255,255,255,0.95) !important;
  box-shadow: 0 30px 60px rgba(0,0,0,0.12), 0 12px 30px rgba(107,47,217,0.15) !important;
}

[data-theme="vanilla"] .us-mobile-overlay {
  background: rgba(255,255,255,0.97) !important;
}

[data-theme="vanilla"] .us-grad-border {
  background: #ffffff !important;
}

[data-theme="vanilla"] .us-quote-box {
  background: #ffffff !important;
}

[data-theme="vanilla"] .us-filters-sticky {
  background: rgba(255,255,255,0.90) !important;
}

/* ============================================================
   TEMA: universo-menta — Verde menta sobre negro profundo
   Activo con: <html data-theme="universo-menta">
   ============================================================ */
[data-theme="universo-menta"] {
  /* Fondos */
  --bg:            #07070B;
  --bg-surface:    #0B0D10;
  --bg-surface-2:  #0F1214;

  /* Texto */
  --ink:       #F4F2F8;
  --ink-soft:  #A7A5B3;
  --ink-muted: #6D6B79;
  --ink-dim:   rgba(244,242,248,.35);

  /* Acento principal — verde menta */
  --accent:       #5FEFC4;
  --accent-blue:  #46E7B8;
  --accent-pink:  #22D9A2;

  /* Degradados */
  --grad:        linear-gradient(102deg, #C5FFEC, #5FEFC4 45%, #22D9A2);
  --grad-accent: linear-gradient(110deg, #9DF8DC, #46E7B8 55%, #1FCE9C);

  /* Líneas */
  --line:        rgba(255,255,255,.06);
  --line-strong: rgba(255,255,255,.12);
  --line-accent: rgba(95,239,196,.40);

  /* Glass */
  --glass-bg:     rgba(255,255,255,.012);
  --glass-border: rgba(95,239,196,.18);
  --glass-blur:   blur(24px);

  /* Sombras */
  --shadow-card: 0 8px 32px rgba(0,0,0,.55);
  --shadow-btn:  0 0 44px rgba(46,224,176,.45), inset 0 0 0 1px rgba(190,255,235,.55);
  --shadow-glow: 0 0 80px rgba(46,224,176,.18);

  /* Fade bottom */
  --fade-bottom: linear-gradient(to bottom, transparent, #07070B);

  /* El gradiente menta es CLARO → el texto sobre botones de acento va oscuro. */
  --on-accent: #05231A;
}

/* Overrides para elementos con inline styles que no reaccionan a CSS variables */
[data-theme="universo-menta"] .us-nav {
  background: rgba(7,7,11,.85) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(95,239,196,.12) !important;
}
[data-theme="universo-menta"] .us-mobile-overlay {
  background: #07070B !important;
}
[data-theme="universo-menta"] .us-grad-border {
  background: linear-gradient(110deg, #9DF8DC, #46E7B8 55%, #1FCE9C) !important;
}
[data-theme="universo-menta"] .us-filters-sticky {
  background: rgba(7,7,11,.92) !important;
}
[data-theme="universo-menta"] .us-quote-box {
  background: rgba(95,239,196,.04) !important;
  border-color: rgba(95,239,196,.20) !important;
}
[data-theme="universo-menta"] .soul-letter-card {
  background: rgba(95,239,196,.04) !important;
  border-color: rgba(95,239,196,.15) !important;
}
[data-theme="universo-menta"] .trans-cta {
  color: #05231A !important;
}

/* Fondo de página con halos verdes (reemplaza halos morados del default) */
[data-theme="universo-menta"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(130% 95% at 50% -8%,  rgba(34,175,134,.18), transparent 56%),
    radial-gradient(72%  62% at 12%  8%,  rgba(28,84,74,.35),   transparent 60%),
    radial-gradient(82%  72% at 88% 96%,  rgba(16,108,116,.25), transparent 62%),
    #07070B;
  pointer-events: none;
}

/* ============================================================
   TEMA: maya-jade — Obsidiana + jade + oro (Mayan Signals)
   Activo con: <html data-theme="maya-jade">
   ============================================================ */
[data-theme="maya-jade"] {
  /* Fondos */
  --bg:            #0A0E0C;
  --bg-surface:    #0E1512;
  --bg-surface-2:  #111A16;

  /* El jade es CLARO → texto oscuro sobre botones de acento (regla on-accent). */
  --on-accent: #06231C;

  /* Texto — pergamino cálido */
  --ink:       #EDE7D6;
  --ink-soft:  #A9BCB2;
  --ink-muted: #728479;
  --ink-dim:   rgba(237,231,214,.35);

  /* Acento principal jade · secundario oro */
  --accent:       #2FBF9F;
  --accent-blue:  #E9B44C;
  --accent-pink:  #E9B44C;

  /* Degradados jade → oro */
  --grad:        linear-gradient(135deg, #2FBF9F 0%, #E9B44C 100%);
  --grad-accent: linear-gradient(110deg, #46D6B4, #2FBF9F 50%, #1E8B74);

  /* Líneas */
  --line:        rgba(237,231,214,.06);
  --line-strong: rgba(237,231,214,.12);
  --line-accent: rgba(47,191,159,.40);

  /* Glass */
  --glass-bg:     rgba(47,191,159,.03);
  --glass-border: rgba(47,191,159,.18);
  --glass-blur:   blur(24px);

  /* Sombras — glow jade + filo oro */
  --shadow-card: 0 8px 32px rgba(0,0,0,.55);
  --shadow-btn:  0 0 44px rgba(47,191,159,.40), inset 0 0 0 1px rgba(233,180,76,.40);
  --shadow-glow: 0 0 80px rgba(233,180,76,.16);

  /* Fade bottom */
  --fade-bottom: linear-gradient(to bottom, transparent, #0A0E0C);

  /* Test — variables internas */
  --t-bg:       #0A0E0C;
  --t-ink:      #EDE7D6;
  --t-ink-soft: #A9BCB2;
  --t-line:     rgba(237,231,214,.08);
}

/* Overrides para elementos con inline styles (páginas del motor: resultado/entrega/dashboard) */
[data-theme="maya-jade"] .us-nav {
  background: rgba(10,14,12,.85) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(47,191,159,.12) !important;
}
[data-theme="maya-jade"] .us-mobile-overlay {
  background: #0A0E0C !important;
}
[data-theme="maya-jade"] .us-grad-border {
  background: linear-gradient(135deg, #2FBF9F, #E9B44C) !important;
}
[data-theme="maya-jade"] .us-filters-sticky {
  background: rgba(10,14,12,.92) !important;
}
[data-theme="maya-jade"] .us-quote-box {
  background: rgba(47,191,159,.04) !important;
  border-color: rgba(47,191,159,.20) !important;
}
[data-theme="maya-jade"] .soul-letter-card {
  background: rgba(47,191,159,.04) !important;
  border-color: rgba(233,180,76,.18) !important;
}
[data-theme="maya-jade"] .trans-cta {
  color: #06211B !important;
}

/* Fondo de página con halos jade + oro (reemplaza halos morados del default) */
[data-theme="maya-jade"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(130% 95% at 50% -8%,  rgba(47,191,159,.16), transparent 56%),
    radial-gradient(72%  62% at 12%  8%,  rgba(30,139,116,.30), transparent 60%),
    radial-gradient(82%  72% at 88% 96%,  rgba(233,180,76,.15), transparent 62%),
    #0A0E0C;
  pointer-events: none;
}

/* ============================================================
   TEMA: lifelab-noir — Negro profundo + violeta/rosa/azul (LifeLab)
   Activo con: <html data-theme="lifelab-noir">
   ============================================================ */
[data-theme="lifelab-noir"] {
  /* Fondos */
  --bg:            #08080D;
  --bg-surface:    #0E0E16;
  --bg-surface-2:  #12121C;

  /* Botones estilo Universal Signals: gradiente lila→rosa con texto blanco. */
  --on-accent: #ffffff;

  /* Texto — crema del wordmark LifeLab */
  --ink:       #F2EDE3;
  --ink-soft:  #B9B4C6;
  --ink-muted: #7E7A8C;
  --ink-dim:   rgba(242,237,227,.35);

  /* Acento principal violeta · secundarios rosa y azul */
  --accent:       #8B5CF6;
  --accent-blue:  #38BDF8;
  --accent-pink:  #EC4899;

  /* Degradado de acción estilo US: lila → rosa (texto blanco encima) */
  --grad:        linear-gradient(135deg, #c789ff 0%, #ff66c4 100%);
  --grad-accent: linear-gradient(135deg, #c789ff 0%, #ff66c4 100%);

  /* Líneas */
  --line:        rgba(242,237,227,.06);
  --line-strong: rgba(242,237,227,.12);
  --line-accent: rgba(139,92,246,.40);

  /* Glass */
  --glass-bg:     rgba(139,92,246,.04);
  --glass-border: rgba(139,92,246,.20);
  --glass-blur:   blur(24px);

  /* Sombras — glow violeta + filo rosa */
  --shadow-card: 0 8px 32px rgba(0,0,0,.60);
  --shadow-btn:  0 0 44px rgba(255,102,196,.40), inset 0 0 0 1px rgba(199,137,255,.40);
  --shadow-glow: 0 0 80px rgba(236,72,153,.14);
}

/* Overrides para elementos con inline styles (páginas del motor) */
[data-theme="lifelab-noir"] .us-nav {
  background: rgba(8,8,13,.85) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(139,92,246,.14) !important;
}
[data-theme="lifelab-noir"] .us-mobile-overlay {
  background: #08080D !important;
}
[data-theme="lifelab-noir"] .us-grad-border {
  background: linear-gradient(135deg, #c789ff, #ff66c4) !important;
}
[data-theme="lifelab-noir"] .us-filters-sticky {
  background: rgba(8,8,13,.92) !important;
}
[data-theme="lifelab-noir"] .us-quote-box {
  background: rgba(139,92,246,.05) !important;
  border-color: rgba(139,92,246,.22) !important;
}
[data-theme="lifelab-noir"] .soul-letter-card {
  background: rgba(139,92,246,.05) !important;
  border-color: rgba(236,72,153,.18) !important;
}
[data-theme="lifelab-noir"] .trans-cta {
  color: #ffffff !important;
}

/* Fondo de página con halos violeta + rosa + azul */
[data-theme="lifelab-noir"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(130% 95% at 50% -8%,  rgba(139,92,246,.18), transparent 56%),
    radial-gradient(72%  62% at 12%  8%,  rgba(56,189,248,.14), transparent 60%),
    radial-gradient(82%  72% at 88% 96%,  rgba(236,72,153,.14), transparent 62%),
    #08080D;
  pointer-events: none;
}

/* ============================================================
   TEMA: mm-claro — Mapas Mentales, rediseño 18-oct-2026
   Blanco → menta, cian #1CCCB9, tinta #111, Montserrat 800/600.
   Activo con: <html data-theme="mm-claro">. Las fuentes y el resto de la
   piel (nítido, Cielo) viven en /assets/pieles/mm-claro.css (lib/piel.php).
   Contraste: cian sobre blanco NO es texto (2,0:1); el texto en cian usa
   #0A7368 (5,7:1); el botón cian lleva letra #111 (11,3:1).
   ============================================================ */
[data-theme="mm-claro"] {
  --bg:           #FFFFFF;
  --bg-surface:   #E3F6F3;
  --bg-surface-2: #D5FFF6;

  --ink:          #111111;
  --ink-soft:     #333333;
  --ink-muted:    #0A7368;
  --ink-dim:      #6B6B6B;

  --accent:       #1CCCB9;
  --accent-blue:  #0A7368;
  --accent-pink:  #0A7368;
  /* --grad se usa sobre todo como TEXTO degradado (background-clip:text) y como
     barra de progreso: va en cian oscuro (≥3:1 sobre blanco). Los botones de
     acento los pinta la piel en #1CCCB9 con letra #111. */
  --grad:         linear-gradient(135deg, #0A7368 0%, #12A592 100%);
  --grad-accent:  linear-gradient(135deg, #0A7368 0%, #12A592 100%);

  --line:         rgba(28,204,185,.35);
  --line-strong:  rgba(28,204,185,.75);
  --line-accent:  #1CCCB9;

  --glass-bg:     #FFFFFF;
  --glass-border: #1CCCB9;
  --glass-blur:   none;

  --shadow-card:  0 30px 60px -36px rgba(11,127,115,.35);
  --shadow-btn:   none;
  --shadow-glow:  none;
  --fade-bottom:  rgba(255,255,255,.98);
  --star-fill:    transparent;

  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-serif:   'Montserrat', system-ui, sans-serif;
  --font-mono:    'Montserrat', system-ui, sans-serif;

  --on-accent:    #111111;

  --t-bg:         #FFFFFF;
  --t-ink:        #111111;
  --t-ink-soft:   #333333;
  --t-line:       rgba(28,204,185,.5);

  --radius-sm:    12px;
  --radius-md:    16px;
  --radius-lg:    24px;
}
[data-theme="mm-claro"] .us-nav { background: rgba(255,255,255,.92) !important; border-bottom-color: #E3F6F3 !important; }
[data-theme="mm-claro"] .us-mobile-overlay { background: rgba(255,255,255,.97) !important; }
[data-theme="mm-claro"] .us-grad-border, [data-theme="mm-claro"] .us-quote-box { background: #FFFFFF !important; }
[data-theme="mm-claro"] .us-filters-sticky { background: rgba(255,255,255,.92) !important; }
[data-theme="mm-claro"] .soul-letter-card { background: #FFFFFF !important; border: 1.5px solid #1CCCB9 !important; box-shadow: 0 30px 60px -36px rgba(11,127,115,.45) !important; }
[data-theme="mm-claro"] .trans-cta { color: #111111 !important; }
[data-theme="mm-claro"] .us-grad-text { background: none !important; -webkit-text-fill-color: #0A7368 !important; color: #0A7368 !important; }