/* ============================================================
   NETPAY THEME — override layer sobre Lumina Design System
   Carga DESPUÉS de los tokens y styles.css de Lumina.
   Mantiene toda la estructura de Lumina (escala, spacing, motion,
   componentes) y sustituye paleta, tipografía, marca y — desde v2 —
   las REGLAS DE APLICACIÓN del color.

   v2 · Alineado al sitio netpay.mx:
   el azul no es un acento escaso, es la superficie estructural.
   El morado profundo es la acción. El canvas es blanco azulado.
   ============================================================ */

:root {
  /* ── AZUL NETPAY — superficie estructural (el 30%) y acento de dato ── */
  --color-lb-pale:   #EFF4FB;   /* canvas azulado del sitio */
  --color-lb-ice:    #E7F0FE;
  --color-lb-ghost:  #BBD5FB;
  --color-lb-mist:   #9FC2F7;
  --color-lb-glow:   #4A8FF7;
  --color-lb-vivid:  #2A7DF4;
  --color-lb-core:   #116EF0;   /* azul de marca — banda de nav y secciones full-bleed */
  --color-lb-deep:   #0B4FB5;
  --color-lb-abyss:  #073B8A;

  /* ── MORADO NETPAY — la acción (el 10%) ── */
  --color-grape:      #260059;  /* botones y CTA */
  --color-grape-glow: #3D0F80;  /* hover */
  --color-grape-deep: #1A0040;  /* pressed */
  --color-grape-ice:  #EDE7F6;

  /* ── NEUTRALES — el 60% dominante (blanco azulado, no gris cálido) ── */
  --color-chalk:     #EFF4FB;
  --color-warm:      #E6EBF1;
  --color-maize:     #FFF3C4;
  --color-stone:     #D6DFEC;
  --color-ash:       #6E7A8F;
  --color-ink:       #2B3A52;
  --color-void:      #0E1B2E;

  /* ── ESTRUCTURA — bandas y superficies de marca ──
     deep-green conserva su nombre por compatibilidad: es el color de
     las bandas estructurales (headers, footers, nav). En NetPay es azul. */
  --color-deep-green:#116EF0;
  --color-forest:    #0B4FB5;
  --color-dust:      #073B8A;
  --color-pine:      #4A5C7A;   /* etiquetas y meta SOBRE SUPERFICIE CLARA */
  --color-sage:      #CFE6EC;

  /* Texto sobre banda de marca (azul o morado). Nunca usar pine ahí. */
  --on-brand:        #FFFFFF;
  --on-brand-muted:  rgba(255,255,255,.74);
  --on-brand-faint:  rgba(255,255,255,.48);

  /* ── SUPERFICIES OSCURAS — morado profundo, no marino ── */
  --color-dark-bg:      #1A0040;
  --color-dark-surface: #260059;
  --color-dark-card:    #34067A;
  --color-dark-border:  #4A2694;
  --color-dark-muted:   #6B4AAE;

  /* ── SEMÁNTICOS ── */
  --color-success:    #0E6B4F;
  --color-success-bg: #D6F1E4;
  --color-warning:    #9A6A00;
  --color-warning-bg: #FFF3C4;
  --color-error:      #B02525;
  --color-error-bg:   #FCEBEB;

  --color-np-teal:   #00778F;
  --color-np-teal-bg:#E0F1F4;

  /* ── TIPOGRAFÍA ── */
  --font-display: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Courier New', monospace;
  --weight-display: 800;
  --tracking-display: -0.03em;

  /* ── MARCA ── */
  --np-logo-light: url('https://netpay.mx/wp-content/uploads/2026/01/1125-LOGO-NETPAY-WHITE-300x69.png');
}

:root {
  --surface-card:   #FFFFFF;
  --surface-alt:    var(--color-warm);
  --text-secondary: var(--color-ink);
  --text-accent:    var(--color-lb-deep);
  --border-subtle:  var(--color-stone);
}

[data-theme="dark"] {
  --surface-card: var(--color-dark-card);
}

/* El display de NetPay es sans, no serif: la cursiva no es el mecanismo
   de énfasis. Se usa peso, no italic. */
h1, .h1, h2, .h2, h3, .h3, .display {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
}
h1, .h1, .display { font-weight: 800; }
h2, .h2, h3, .h3  { font-weight: 700; }
em, i { font-style: normal; font-weight: 700; color: var(--color-lb-core); }

/* ── APLICACIÓN: los botones de NetPay son píldoras moradas ── */
.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-ghost-light,
button.btn, a.btn { border-radius: 9999px; }

.btn-primary {
  background: var(--color-grape);
  border-color: var(--color-grape);
  color: #fff;
}
.btn-primary:hover { background: var(--color-grape-glow); border-color: var(--color-grape-glow); }
.btn-primary:active { background: var(--color-grape-deep); border-color: var(--color-grape-deep); }

/* Sobre banda azul el botón conserva el morado: es el contraste de marca. */
.on-brand .btn-primary, .np-band .btn-primary {
  background: var(--color-grape);
  border-color: var(--color-grape);
}

/* Foco: azul sobre claro, blanco sobre banda de marca. */
:focus-visible { outline: 2px solid var(--color-lb-core); outline-offset: 3px; }
.np-band :focus-visible, .on-brand :focus-visible { outline-color: #fff; }