/* ============================================================
   Parlando — Neo-Brutalist tokens (templado)
   Restyle visual. NO cambia comportamiento/rutas/estados/flujos.
   Fondo CLARO en marketing (landings) · OSCURO en apps (portal/host/attendee/admin).
   ============================================================ */
:root {
  /* Acento LOUD */
  --nb-magenta:     #A62CCE;   /* primario: fills + CTAs */
  --nb-magenta-ink: #ffffff;

  /* Choque brutalista — cyan SOLO como bloque/relleno con texto negro */
  --nb-cyan:        #37E7C8;
  --nb-cyan-ink:    #111111;

  /* Estructura */
  --nb-black:       #111111;
  --nb-line:        #000000;

  /* Claro (marketing) */
  --nb-bg-light:    #F4EEE7;
  --nb-text-light:  #111111;
  --nb-text-light-2:#2b2b2b;
  --nb-text-light-3:#333333;
  --nb-card-light:  #ffffff;

  /* Oscuro (apps) — conserva tokens Parlando */
  --nb-bg-dark:     #07040C;
  --nb-ink-900:     #130C1F;
  --nb-ink-850:     #1A1029;
  --nb-text-dark:   #FEFEFE;
  --nb-text-secondary:#E7DFEC;
  --nb-text-muted:  #9A86AD;

  /* Estado (planos) */
  --nb-success:     #2FBF8F;
  --nb-warning:     #E6A93B;
  --nb-danger:      #E2557A;

  /* Bordes */
  --nb-border:      3px solid #000;
  --nb-border-thin: 2px solid #000;
  --nb-border-hero: 4px solid #000;

  /* Sombras duras, offset, SIN blur */
  --nb-shadow:      4px 4px 0 #000;
  --nb-shadow-lg:   6px 6px 0 #000;
  --nb-shadow-hero: 10px 10px 0 #000;
  --nb-shadow-cyan: 6px 6px 0 #37E7C8;

  /* Todo recto. Excepción: biseles de teléfono/ventana en mockups. */
  --nb-radius: 0;

  /* Tipografía */
  --nb-font-display: 'Poppins', system-ui, sans-serif;  /* 800, tracking -0.03/-0.04em */
  --nb-font-body:    'Inter', system-ui, sans-serif;    /* 500-600 */
  --nb-font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;
}

/* PROHIBIDO en componentes de UI: blur, box-shadow con blur, gradientes, border-radius,
   glows. Se conservan solo radios de biseles de dispositivo (realismo del mockup). */

/* Interacción estándar (hover lift / active press). Respetar prefers-reduced-motion. */
.nb-interactive { transition: transform 120ms ease-out, box-shadow 120ms ease-out; }
.nb-interactive:hover  { transform: translate(-2px,-2px); box-shadow: var(--nb-shadow-lg); }
.nb-interactive:active { transform: translate(2px,2px);  box-shadow: 0 0 0 #000; }

/* Foco visible brutalista (reemplaza el ring blando) */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--nb-cyan), var(--nb-shadow);
}

@media (prefers-reduced-motion: reduce) {
  .nb-interactive { transition: none; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}