/* ==========================================================================
   ⚠️  ARCHIVO AUTOGENERADO — NO EDITAR A MANO.
   Fuente: brand/brand.json v2.1.0 · Regenerar: node brand/build.mjs
   NOOXIA — Design Tokens (paleta oficial ÚNICA)
   Importá este archivo en CUALQUIER app/web/pieza y usá SOLO estas variables.
   Modo claro por defecto; el oscuro con :root[data-theme="dark"] o el SO.
   ========================================================================== */

:root {
  /* ---- COLOR (modo claro) ---- */
  --nx-bg: #F5F8FF;
  --nx-surface: #EDF1FF;
  --nx-surface-2: #E2E8F8;
  --nx-text: #0D0D10;
  --nx-muted: #4B5568;
  --nx-border: rgba(13,13,16,0.10);
  --nx-accent: #B5FB05;
  --nx-accent-hover: #A1E004;
  --nx-accent-text: #3B7000;
  --nx-on-accent: #0D0D10;
  --nx-error: #DC2626;
  --nx-raised: 6px 6px 14px rgba(31,38,60,0.12), -6px -6px 14px rgba(255,255,255,0.90);
  --nx-inset: inset 4px 4px 8px rgba(31,38,60,0.10), inset -4px -4px 8px rgba(255,255,255,0.80);
  --nx-pressed: inset 2px 2px 5px rgba(31,38,60,0.14), inset -2px -2px 5px rgba(255,255,255,0.70);
  --nx-shadow-soft: 0 14px 34px rgba(20,30,60,.10);
  --nx-glow-accent: 0 0 14px rgba(181,251,5,0.30);
  --nx-bento: 10px 10px 30px rgba(20,30,60,.12), inset 1px 1px 0 rgba(255,255,255,.90);
  --nx-bento-dark: 10px 10px 30px rgba(0,0,0,.15), inset 1px 1px 0 rgba(255,255,255,.05);
  --nx-bento-sm: 4px 4px 10px rgba(20,30,60,.10), inset 1px 1px 0 rgba(255,255,255,.80);

  /* ---- SOBRE FONDO SIEMPRE OSCURO (card negra, footer, tooltip) ----
     FIJOS a propósito: no siguen el tema. --nx-text/--nx-muted se invierten y
     sobre una superficie oscura fija dejan texto negro sobre negro. Sobre #0D0D10: text 15.8:1 · muted 7.6:1. Ambos AA. */
  --nx-on-dark-text: #E5E7EB;
  --nx-on-dark-muted: #9CA3AF;
  --nx-on-dark-border: rgba(255,255,255,0.14);

  /* ---- TIPOGRAFÍA ---- */
  --nx-font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --nx-weight-title: 700;
  --nx-weight-body: 400;
  --nx-weight-caption: 200;
  --nx-fs-h1: 2.5rem;  --nx-lh-h1: 1.15;
  --nx-fs-h2: 2rem;  --nx-lh-h2: 1.2;
  --nx-fs-h3: 1.5rem;  --nx-lh-h3: 1.25;
  --nx-fs-body: 1rem;  --nx-lh-body: 1.6;
  --nx-fs-small: 0.875rem;  --nx-lh-small: 1.5;
  --nx-fs-caption: 0.75rem;  --nx-lh-caption: 1.4;

  /* ---- ESPACIADO (base 8) ---- */
  --nx-space-1: 4px;
  --nx-space-2: 8px;
  --nx-space-3: 16px;
  --nx-space-4: 24px;
  --nx-space-5: 32px;
  --nx-space-6: 48px;
  --nx-space-7: 64px;
  --nx-space-8: 96px;

  /* ---- RADIOS ---- */
  --nx-radius-sm: 8px;
  --nx-radius-md: 12px;
  --nx-radius-lg: 16px;
  --nx-radius-card: 24px;
  --nx-radius-pill: 999px;
  --nx-radius-circle: 50%;
  --nx-radius-bento: 32px;
  --nx-radius-bento-sm: 20px;
  --nx-radius: 12px;

  /* ---- ESCALA HEAT (visualización de dato) ---- */
  --nx-heat-1: #EF4444;
  --nx-heat-2: #F59E0B;
  --nx-heat-3: #EAB308;
  --nx-heat-4: #84CC16;
  --nx-heat-5: #B5FB05;

  /* ---- MOTION ---- */
  --nx-dur-fast: 150ms;
  --nx-dur-base: 250ms;
  --nx-dur-slow: 400ms;
  --nx-ease-standard: cubic-bezier(.4,0,.2,1);
  --nx-ease-entrance: cubic-bezier(0,0,.2,1);
  --nx-ease-exit: cubic-bezier(.4,0,1,1);
}

/* ============ MODO OSCURO (explícito) ============ */
:root[data-theme="dark"] {
  --nx-bg: #060606;
  --nx-surface: #111111;
  --nx-surface-2: #1A1A1A;
  --nx-text: #E5E7EB;
  --nx-muted: #9CA3AF;
  --nx-border: rgba(255,255,255,0.06);
  --nx-accent: #B5FB05;
  --nx-accent-hover: #C9FC4D;
  --nx-accent-text: #B5FB05;
  --nx-on-accent: #0D0D10;
  --nx-error: #FF6B6B;
  --nx-raised: 0 4px 16px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  --nx-inset: inset 0 2px 8px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.03);
  --nx-pressed: inset 0 2px 6px rgba(0,0,0,0.55);
  --nx-shadow-soft: 0 16px 40px rgba(0,0,0,.55);
  --nx-glow-accent: 0 0 16px rgba(181,251,5,0.35);
  --nx-bento: 0 16px 40px rgba(0,0,0,.55), inset 1px 1px 0 rgba(255,255,255,.06);
  --nx-bento-dark: 0 16px 40px rgba(0,0,0,.55), inset 1px 1px 0 rgba(255,255,255,.05);
  --nx-bento-sm: 0 8px 20px rgba(0,0,0,.45), inset 1px 1px 0 rgba(255,255,255,.05);
}

/* ============ MODO OSCURO (preferencia del SO) ============ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nx-bg: #060606;
    --nx-surface: #111111;
    --nx-surface-2: #1A1A1A;
    --nx-text: #E5E7EB;
    --nx-muted: #9CA3AF;
    --nx-border: rgba(255,255,255,0.06);
    --nx-accent: #B5FB05;
    --nx-accent-hover: #C9FC4D;
    --nx-accent-text: #B5FB05;
    --nx-on-accent: #0D0D10;
    --nx-error: #FF6B6B;
    --nx-raised: 0 4px 16px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
    --nx-inset: inset 0 2px 8px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.03);
    --nx-pressed: inset 0 2px 6px rgba(0,0,0,0.55);
    --nx-shadow-soft: 0 16px 40px rgba(0,0,0,.55);
    --nx-glow-accent: 0 0 16px rgba(181,251,5,0.35);
    --nx-bento: 0 16px 40px rgba(0,0,0,.55), inset 1px 1px 0 rgba(255,255,255,.06);
    --nx-bento-dark: 0 16px 40px rgba(0,0,0,.55), inset 1px 1px 0 rgba(255,255,255,.05);
    --nx-bento-sm: 0 8px 20px rgba(0,0,0,.45), inset 1px 1px 0 rgba(255,255,255,.05);
  }
}

/* ---- Helpers base ---- */
body        { background: var(--nx-bg); color: var(--nx-text); font-family: var(--nx-font); }
.nx-title   { font-weight: var(--nx-weight-title); }
.nx-caption { font-weight: var(--nx-weight-caption); color: var(--nx-muted); }
.nx-cta     { background: var(--nx-accent); color: var(--nx-on-accent); font-weight: var(--nx-weight-title);
              border: 0; border-radius: var(--nx-radius-pill); padding: var(--nx-space-2) var(--nx-space-4); }

/* ---- Estilo 1: NEUMÓRFICO — kit ../ui-kit/ ---- */
.nx-neu     { background: var(--nx-surface); box-shadow: var(--nx-raised); border-radius: var(--nx-radius); }

/* ---- Estilo 2: BOLD — kit ../ui-kit-bold/ ---- */
.nx-pill        { border-radius: var(--nx-radius-pill); }
.nx-card        { background: var(--nx-surface); box-shadow: var(--nx-shadow-soft); border-radius: var(--nx-radius-card); }
.nx-card-black  { background: #0D0D10; color: #FFFFFF; border-radius: var(--nx-radius-card); }
.nx-card-lime   { background: var(--nx-accent); color: #0D0D10; border-radius: var(--nx-radius-card); }
.nx-btn-bold    { background: #0D0D10; color: #FFFFFF; font-weight: 700; border: 0;
                  border-radius: var(--nx-radius-pill); padding: 13px 24px; }
.nx-icon-btn    { width: 46px; height: 46px; border-radius: var(--nx-radius-circle); display: inline-flex;
                  align-items: center; justify-content: center; border: 1.5px solid var(--nx-border); }

/* ---- Accesibilidad: motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   CAPA DE COMPATIBILIDAD — www.nooxia.com  ·  estilo BENTO
   Nombres de variable heredados, apuntando a los tokens oficiales.
   Los pares on-dark y las sombras de bento YA son oficiales (--nx-on-dark-*,
   --nx-bento*): no se redefinen acá.
   ========================================================================== */
:root {
  --nooxia-lime:            var(--nx-accent);
  --nooxia-lime-hover:      var(--nx-accent-hover);
  --nooxia-wax-gray:        #2B2E37;         /* color del LOGO, no de la UI */
  --nooxia-white:           #FFFFFF;
  --nooxia-color-accent:    var(--nx-accent);
  --nooxia-color-text:      var(--nx-text);
  --nooxia-color-on-accent: var(--nx-on-accent);
  --nooxia-font:            var(--nx-font);
  --nooxia-weight-title:    var(--nx-weight-title);
  --nooxia-weight-body:     var(--nx-weight-body);
  --nooxia-weight-caption:  var(--nx-weight-caption);
  --nooxia-radius:          var(--nx-radius);
  --nooxia-space-2:         var(--nx-space-2);
  --nooxia-space-4:         var(--nx-space-4);
  --nx-surface2:            var(--nx-surface-2);   /* typo histórico */

  --bg-page:          var(--nx-bg);
  --color-black:      var(--nx-text);
  --color-white:      #FFFFFF;
  --color-neon:       var(--nx-accent);
  --color-gray-light: var(--nx-surface-2);
  --color-gray:       var(--nx-muted);
  --color-error:      var(--nx-error);
  --text-primary:     var(--nx-text);
  --text-secondary:   var(--nx-muted);

  /* Superficies del degradado bento (mismas fórmulas que ui-kit-bento/) */
  --surface-hi: #FFFFFF;
  --surface-lo: var(--nx-surface-2);
  --dark-hi:    color-mix(in srgb, var(--nx-on-accent) 86%, #FFFFFF);
  --dark-lo:    color-mix(in srgb, var(--nx-on-accent) 94%, #FFFFFF);
  --dark-edge:  var(--nx-on-accent);
  --accent-edge: color-mix(in srgb, var(--nx-accent) 82%, #000000);
}