/* ==========================================================================
   NEXIA · Tokens de diseño  (fuente única de verdad de la capa visual)
   Orden de carga:  nexia-fonts.css → nexia-tokens.css → nexia-base.css → nexia-components.css
   Regla: ningún archivo de la app debe escribir un color hex ni una fuente a mano;
   todo se consume desde estas variables.
   ========================================================================== */

:root {
  /* ── Marca (paleta oficial de la lámina corporativa) ─────────────────── */
  --nx-green-600: #087F5B;   /* Verde principal   · botones, enlaces, foco   */
  --nx-green-800: #07543F;   /* Verde oscuro      · títulos, wordmark        */
  --nx-gold-500:  #D4AF37;   /* Dorado principal  · acento, nunca texto sobre claro */
  --nx-gold-300:  #E6C75A;   /* Dorado claro      · acento sobre verde oscuro */
  --nx-cream:     #F7F5EE;   /* Crema             · fondo de la aplicación   */
  --nx-white:     #FFFFFF;

  /* ── Escala derivada del verde (mismo matiz que la marca) ────────────── */
  --nx-green-50:  #EAF6F0;
  --nx-green-100: #D3EBDF;
  --nx-green-200: #A9D6C1;
  --nx-green-300: #6FB99B;
  --nx-green-400: #35A07F;
  --nx-green-700: #066A4C;   /* hover de botón primario */
  --nx-green-900: #053F30;   /* barra lateral, portadas */
  --nx-green-950: #032B21;

  /* ── Escala derivada del dorado ──────────────────────────────────────── */
  --nx-gold-100:  #F8EFC9;
  --nx-gold-600:  #B8961F;   /* hover de botón dorado (solo decorativo) */
  --nx-gold-700:  #7A5F0A;   /* ÚNICO dorado apto para texto sobre fondo claro (6:1) */
  --nx-gold-bd:   #E8D58B;   /* borde de badge dorado */

  /* ── Neutros con temperatura de la marca ─────────────────────────────── */
  --nx-cream-2:        #EFEBDD;   /* fondo hundido: zonas de cabecera de tabla, filas hover */
  --nx-ink:            #10271F;   /* texto principal  (15:1 sobre blanco) */
  --nx-ink-2:          #3A4C44;   /* texto secundario ( 8:1 sobre crema)  */
  --nx-muted:          #5A6B63;   /* texto atenuado   (5.2:1 sobre crema) */
  --nx-border:         #E2DED0;   /* divisores y bordes de tarjeta        */
  --nx-border-strong:  #C9C3AE;
  --nx-border-input:   #7F8E86;   /* bordes de campos: 3.4:1 (WCAG 1.4.11) */

  /* ── Estados semánticos (distintos a la marca para no confundirse) ───── */
  /*    -fg: texto/ícono sobre -bg · -bg: fondo tenue · -bd: borde · -solid: relleno */
  --nx-success-fg: #1B6B34;  --nx-success-bg: #E6F4EA;  --nx-success-bd: #B5DFC1;  --nx-success-solid: #2B8F49;
  --nx-warning-fg: #84470A;  --nx-warning-bg: #FDF0DE;  --nx-warning-bd: #F2CFA0;  --nx-warning-solid: #C9650C;
  --nx-danger-hover: #9F1D14; --nx-danger-press: #86170F;   /* estados del botón peligro */
  --nx-danger-fg:  #A3241B;  --nx-danger-bg:  #FCE9E7;  --nx-danger-bd:  #F3B9B3;  --nx-danger-solid:  #B42318;
  --nx-info-fg:    #1B5B8A;  --nx-info-bg:    #E3F0F9;  --nx-info-bd:    #B0D3EA;  --nx-info-solid:    #2A78B0;
  --nx-neutral-fg: #46554E;  --nx-neutral-bg: #EEF0EA;  --nx-neutral-bd: #D5D9CF;  --nx-neutral-solid: #6B7A72;

  /* ── Roles de color (usar ESTOS en componentes) ──────────────────────── */
  --nx-canvas:        var(--nx-cream);        /* fondo de página */
  --nx-surface:       var(--nx-white);        /* tarjetas, modales, campos */
  --nx-text:          var(--nx-ink);
  --nx-text-soft:     var(--nx-ink-2);
  --nx-text-muted:    var(--nx-muted);
  --nx-heading:       var(--nx-green-800);
  --nx-primary:       var(--nx-green-600);
  --nx-primary-hover: var(--nx-green-700);
  --nx-primary-press: var(--nx-green-800);
  --nx-primary-tint:  var(--nx-green-50);
  --nx-accent:        var(--nx-gold-500);
  --nx-link:          var(--nx-green-700);
  --nx-focus:         var(--nx-green-600);        /* anillo de foco sobre claro  */
  --nx-focus-on-dark: var(--nx-gold-300);         /* anillo de foco sobre verde oscuro */

  /* Superficies oscuras (barra lateral, portadas) */
  --nx-dark-bg:       var(--nx-green-900);
  --nx-dark-bg-deep:  var(--nx-green-950);
  --nx-dark-text:     #FFFFFF;
  --nx-dark-text-2:   var(--nx-green-200);        /* 7.4:1 sobre green-900 */
  --nx-dark-line:     rgba(255,255,255,.10);
  --nx-dark-hover:    rgba(255,255,255,.07);
  --nx-dark-active:   rgba(230,199,90,.14);

  /* Gradientes de marca (uso puntual: portada, login, franja de sección) */
  --nx-grad-brand:  linear-gradient(135deg, var(--nx-green-800) 0%, var(--nx-green-600) 100%);
  --nx-grad-deep:   linear-gradient(160deg, var(--nx-green-950) 0%, var(--nx-green-900) 55%, var(--nx-green-800) 100%);

  /* ── Tipografía ──────────────────────────────────────────────────────── */
  /* Gotham es la familia deseada; Montserrat es su equivalente libre (SIL OFL) y
     está autoalojada. Si se adquiere la licencia web de Gotham, basta activar el
     bloque comentado en nexia-fonts.css: esta pila ya la prioriza. */
  --nx-font: 'Gotham', 'Montserrat', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;

  --nx-fs-xs:   .75rem;     /* 12 · notas, badges        */
  --nx-fs-sm:   .8125rem;   /* 13 · etiquetas, tablas    */
  --nx-fs-base: .9375rem;   /* 15 · texto de interfaz    */
  --nx-fs-md:   1.0625rem;  /* 17 · texto destacado      */
  --nx-fs-lg:   1.25rem;    /* 20 · título de tarjeta    */
  --nx-fs-xl:   1.5rem;     /* 24 · título de página     */
  --nx-fs-2xl:  clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);  /* 28–36 */
  --nx-fs-3xl:  clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);   /* 36–56 · portada */

  --nx-fw-regular: 400;
  --nx-fw-medium:  500;
  --nx-fw-semi:    600;
  --nx-fw-bold:    700;
  --nx-fw-black:   800;     /* el wordmark es un peso muy alto: títulos hacen eco */

  --nx-lh-tight: 1.15;
  --nx-lh-snug:  1.35;
  --nx-lh-body:  1.6;

  /* ── Espaciado (base 4 px) ───────────────────────────────────────────── */
  --nx-s-1: 4px;  --nx-s-2: 8px;   --nx-s-3: 12px; --nx-s-4: 16px;
  --nx-s-5: 20px; --nx-s-6: 24px;  --nx-s-8: 32px; --nx-s-10: 40px;
  --nx-s-12: 48px; --nx-s-16: 64px;

  /* ── Forma ───────────────────────────────────────────────────────────── */
  /* Las esquinas del logo son suaves pero definidas: radios medios, no píldoras
     (la píldora se reserva para badges y chips). */
  --nx-r-sm: 6px;
  --nx-r-md: 10px;
  --nx-r-lg: 14px;
  --nx-r-pill: 999px;

  --nx-shadow-sm: 0 1px 2px rgba(5,63,48,.06), 0 1px 1px rgba(5,63,48,.04);
  --nx-shadow-md: 0 4px 14px rgba(5,63,48,.08), 0 1px 3px rgba(5,63,48,.05);
  --nx-shadow-lg: 0 18px 48px rgba(3,43,33,.22);
  --nx-ring:        0 0 0 3px rgba(8,127,91,.22);
  --nx-ring-danger: 0 0 0 3px rgba(180,35,24,.20);
  --nx-shadow-plate: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 18px rgba(3,43,33,.28);
  --nx-scrim:       rgba(3,43,33,.58);      /* fondo de modales */

  --nx-icon-stroke: 1.75;
  --nx-tap: 44px;               /* alto mínimo táctil */

  /* ── Movimiento ──────────────────────────────────────────────────────── */
  --nx-ease: cubic-bezier(.2,.7,.2,1);
  --nx-t-fast: 140ms;
  --nx-t-med:  240ms;

  /* ── Capas ───────────────────────────────────────────────────────────── */
  --nx-z-sticky: 50;
  --nx-z-overlay: 99;
  --nx-z-side: 100;
  --nx-z-modal: 200;

  /* Layout del backoffice */
  --nx-side-w: 248px;

  /* ── Alias de compatibilidad ─────────────────────────────────────────────
     El código actual usa estos nombres dentro de style="…". Se mantienen
     apuntando a la nueva paleta hasta que las Fases 6-7 limpien esos estilos.
     RETIRAR en la Fase 10. */
  --accent:     var(--nx-gold-500);
  --accent2:    var(--nx-green-800);
  --bg:         var(--nx-canvas);
  --card-bg:    var(--nx-surface);
  --text:       var(--nx-text);
  --text-muted: var(--nx-text-muted);
  --border:     var(--nx-border);
  --radius:     var(--nx-r-md);
  --shadow:     var(--nx-shadow-md);
  --nav-w:      var(--nx-side-w);
}