/* ── El Vigía Pro · Design Tokens ────────────────────
   Moderno compacto: sans protagonista, rojo de prensa,
   header claro tipo masthead, cuerpo de lectura serif. */

:root {
  /* Acento (rojo de prensa El Vigía) */
  --np-accent:        #c8102e;
  --np-accent-dk:     #9c0c23;
  --np-accent-lt:     #fdeef0;

  /* Footer oscuro fijo (masthead claro arriba, footer oscuro abajo) */
  --np-footer-bg:     #16181c;
  --np-footer-border: #2b2f36;

  /* Header claro (masthead de diario) */
  --np-hdr-bg:        #ffffff;
  --np-hdr-text:      #16181c;
  --np-hdr-border:    #e3e6ea;
  --np-hdr-hover:     rgba(22,24,28,.06);

  /* Superficies — Light mode */
  --np-bg:            #ffffff;
  --np-surface:       #ffffff;
  --np-surface-alt:   #f5f6f7;
  --np-surface-dim:   #eceef0;
  --np-border:        #e3e6ea;
  --np-border-str:    #c6cbd2;

  /* Texto — Light mode */
  --np-text:          #16181c;
  --np-text-sec:      #4a4f57;
  --np-text-muted:    #878e98;
  --np-text-inv:      #ffffff;
  --np-link:          #16181c;
  --np-link-hover:    var(--np-accent);

  /* Tipografía: sans para UI/titulares, serif para lectura */
  --f-head:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-sans:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-serif:    Georgia, 'Times New Roman', serif;
  --f-mono:     ui-monospace, 'Courier New', monospace;

  /* Escala tipográfica (compacta) */
  --t-xs:   11px;
  --t-sm:   13px;
  --t-base: 15px;
  --t-md:   17px;
  --t-lg:   20px;
  --t-xl:   25px;
  --t-2xl:  32px;
  --t-3xl:  42px;
  --t-4xl:  56px;

  /* Lectura de artículo */
  --t-read:  18px;
  --lh-read: 1.8;

  /* Espaciado */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Layout */
  --site-max:    1300px;
  --content-max:  700px;
  --hdr-h:         50px;
  --sidebar-w:    300px;
  --np-lb-h:        0px;   /* alto del leaderboard fijo (lo fija el JS del plugin de ads) */

  /* Sombras */
  --sh-sm:  0 1px 2px rgba(16,18,22,.06);
  --sh-md:  0 4px 14px rgba(16,18,22,.08);
  --sh-lg:  0 8px 28px rgba(16,18,22,.12);
  --sh-xl:  0 16px 48px rgba(16,18,22,.16);

  /* Miscelánea */
  --r-sm:  2px;
  --r-md:  4px;
  --r-lg:  8px;
  --t-fast: 120ms ease;
  --t-med:  240ms ease;
}

/* ── Dark mode (elección del lector) ─────────────────── */
[data-theme="dark"] {
  --np-hdr-bg:      #16181c;
  --np-hdr-text:    #f0f1f3;
  --np-hdr-border:  #2b2f36;
  --np-hdr-hover:   rgba(255,255,255,.08);

  --np-bg:          #121417;
  --np-surface:     #191c20;
  --np-surface-alt: #1f2327;
  --np-surface-dim: #262b31;
  --np-border:      #2b2f36;
  --np-border-str:  #3d434c;

  --np-text:        #eceef0;
  --np-text-sec:    #aab0b9;
  --np-text-muted:  #6d747e;
  --np-link:        #eceef0;

  --np-accent:      #f0324f;
  --np-accent-lt:   rgba(240,50,79,.14);
}