/* ══════════════════════════════════════════════════════
   NEXO Agency — Design Tokens v1.0
   Fuente única de verdad para colores, tipografía,
   espaciado, radios y transiciones.

   Uso:
     <link rel="stylesheet" href="assets/css/tokens.css"/>
   O como primera línea en un CSS propio:
     @import url('../assets/css/tokens.css');

   Páginas existentes van migrando gradualmente.
   Nuevas páginas deben usar este archivo desde el inicio.
   ══════════════════════════════════════════════════════ */

:root {

  /* ── PALETA BASE ──────────────────────────────────── */
  --n-black:      #0e0e10;   /* fondo principal público  */
  --n-black2:     #141416;   /* fondo alt / secciones    */
  --n-panel:      #13131e;   /* paneles, modales         */
  --n-card:       #18181b;   /* tarjetas públicas        */
  --n-card-int:   #191926;   /* tarjetas internas        */
  --n-dark:       #0a0a0f;   /* fondo páginas internas   */

  /* ── AZUL NEXO ────────────────────────────────────── */
  --n-blue:       #2878d6;
  --n-blue-dark:  #1a5cb8;
  --n-blue-glow:  rgba(40, 120, 214, 0.18);
  --n-blue-border:rgba(40, 120, 214, 0.22);

  /* ── ACENTO / ESTADOS ─────────────────────────────── */
  --n-accent:     #4af0c4;   /* verde-cyan: éxito/activo */
  --n-danger:     #e84545;   /* rojo: errores            */
  --n-warn:       #f0a04a;   /* naranja: advertencias    */
  --n-gold:       #c8a84b;   /* dorado: superadmin       */

  /* ── TEXTO ────────────────────────────────────────── */
  --n-white:      #ffffff;
  --n-light:      #b0b0c4;   /* texto secundario público */
  --n-light-int:  #9898b8;   /* texto secundario interno */
  --n-muted:      #7a7a8a;   /* texto apagado público    */
  --n-muted-int:  #5a5a7a;   /* texto apagado interno    */

  /* ── BORDES ───────────────────────────────────────── */
  --n-border:     rgba(255, 255, 255, 0.07);
  --n-border-int: rgba(255, 255, 255, 0.06);

  /* ── TIPOGRAFÍA ───────────────────────────────────── */
  --n-font-body:    'DM Sans', sans-serif;
  --n-font-heading: 'Montserrat', sans-serif;  /* solo hero/logo */
  --n-font-mono:    'DM Mono', monospace;

  /* Tamaños de fuente */
  --n-text-xs:    10px;
  --n-text-sm:    12px;
  --n-text-base:  14px;
  --n-text-md:    15px;
  --n-text-lg:    16px;
  --n-text-xl:    18px;

  /* Letter spacing para tags/labels */
  --n-ls-tag:     3px;
  --n-ls-label:   1.8px;
  --n-ls-btn:     1.5px;

  /* ── ESPACIADO ────────────────────────────────────── */
  --n-gap-xs:     8px;
  --n-gap-sm:     16px;
  --n-gap-md:     24px;
  --n-gap-lg:     40px;
  --n-gap-xl:     60px;

  /* ── RADIOS ───────────────────────────────────────── */
  --n-r-sm:       8px;   /* inputs, chips pequeños     */
  --n-r-md:       12px;  /* tarjetas internas          */
  --n-r-lg:       14px;  /* tarjetas públicas          */
  --n-r-xl:       16px;  /* modales, panels            */
  --n-r-pill:     999px; /* botones redondeados        */

  /* ── TRANSICIONES ─────────────────────────────────── */
  --n-t-fast:     0.15s ease;
  --n-t-base:     0.25s ease;
  --n-t-slow:     0.4s ease;
  --n-t-spring:   0.35s cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ── NAVBAR ───────────────────────────────────────── */
  --n-nav-h:      58px;   /* landing + internal: misma altura */
  --n-nav-bg:     rgba(12, 12, 14, 0.92);

  /* ── SOMBRAS ──────────────────────────────────────── */
  --n-shadow-sm:  0 2px 12px rgba(0, 0, 0, 0.3);
  --n-shadow-md:  0 8px 32px rgba(0, 0, 0, 0.45);
  --n-shadow-lg:  0 24px 64px rgba(0, 0, 0, 0.6);
  --n-shadow-blue:0 4px 20px rgba(40, 120, 214, 0.35);

  /* ── GRADIENTES FRECUENTES ────────────────────────── */
  --n-grad-blue:  linear-gradient(135deg, #2878d6, #1a5cb8);
  --n-grad-top:   linear-gradient(90deg, transparent, #2878d6, transparent);
}

/* ── ALIASES de compatibilidad ────────────────────────
   Las páginas que ya usan --bg, --blue, etc. siguen
   funcionando. Nuevas páginas deben usar --n-* directos.
   ────────────────────────────────────────────────────── */
:root {
  --bg:         var(--n-black);
  --bg2:        var(--n-black2);
  --card:       var(--n-card);
  --blue:       var(--n-blue);
  --blue2:      var(--n-blue-dark);
  --blue-glow:  var(--n-blue-glow);
  --white:      var(--n-white);
  --muted:      var(--n-muted);
  --light:      var(--n-light);
  --border:     var(--n-border);
  --border-blue:var(--n-blue-border);
  --r:          var(--n-r-lg);
  --nav-h:      var(--n-nav-h);
}