/*
 * Dark mode — Argentina Data MCP
 * ------------------------------------------------------------------
 * Las landings definen la paleta clara en su <style> inline (para que sigan
 * funcionando aunque este archivo no cargue). Acá vive solo el override oscuro,
 * activado por `html[data-theme="dark"]` que escribe el script de /theme-toggle.js
 * (y el snippet inline del <head>, que corre antes del primer paint).
 *
 * Regla: si un color se usa como FONDO y como TEXTO, hay dos tokens
 * (--blue / --link, --green / --green-fg). Invertir uno solo rompía el otro.
 */

/*
 * Todo el archivo va dentro de `@media not print`. Al imprimir, el navegador
 * omite los fondos por default pero SI respeta el `color` declarado, asi que
 * una pagina en modo oscuro sale con texto casi blanco sobre papel blanco.
 * Un dark mode por `prefers-color-scheme` se salvaria solo (Chrome fuerza
 * `light` al imprimir); este es por atributo, asi que hay que decirlo.
 */
@media not print {

  html[data-theme="dark"] {
    color-scheme: dark;

    /* Escala de grises invertida: el CSS de la landing ya usa --gray-900 para
       texto, --gray-600 para texto secundario, --gray-200 para bordes y
       --gray-50/100 para fondos sutiles, así que dar vuelta la rampa alcanza. */
    --gray-50: #1e252c;
    --gray-100: #262e37;
    --gray-200: #333c47;
    --gray-300: #414c59;
    --gray-400: #6a7684;
    --gray-600: #a6b0bb;
    --gray-800: #dfe4ea;
    --gray-900: #eef1f5;

    --bg: #12161b;
    --surface: #1a2026;
    --nav-bg: rgba(18, 22, 27, 0.92);
    --gate-bg: rgba(18, 22, 27, 0.94);

    /* --blue no cambia: es fondo de botón con texto blanco (4.9:1) y sobre el
       fondo oscuro sigue destacando. El azul de texto va aparte. */
    --blue-dark: #0090d8;
    --blue-light: #0c3245;
    --link: #5fc0f0;
    --link-strong: #8ad3f5;

    --green-light: #12331f;
    --green-fg: #6fd79a;
    --green-dark: #3d8a68;

    --red: #ff7b7b;
    --red-light: #3b1616;

    --yellow: #a9832f;
    --yellow-light: #33290f;
    --orange: #f0a94a;
    --orange-light: #33280d;
    --orange-strong: #f2b968;

    --warn-bg: #2c2612;
    --warn-border: #4d431f;
    --err-bg: #34191a;
    --err-border: #5c2a2b;

    --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.55);
    --scroll-shade: rgba(0, 0, 0, 0.6);

    --hero-grad: linear-gradient(135deg, #0d2a38 0%, #12161b 52%, #112a1e 100%);

    /* Paneles que ya eran oscuros en modo claro (barra de stats, bloques de
       código): no se invierten, se hunden un poco más. */
    --panel-dark-bg: #0c1116;
    --panel-dark-fg: #eef1f5;
    --code-bg: #0d1319;
    --code-fg: #d7dde3;

    --chart-surface: #1a2026;
    --chart-ink: #dfe4ea;
    --chart-muted: #a6b0bb;
    --chart-grid: #2b333d;
    --chart-axis: #3a4550;
    --chart-1: #4fb3e8;
    --chart-2: #4fd1a5;
    --chart-3: #f0b850;
    --chart-4: #a99bf0;
  }

  /* Categorías de tools: en claro son pares tinte-claro / texto-oscuro; en oscuro
     se invierten a tinte-oscuro / texto-claro uno por uno (los hue son parte de
     la lectura de la grilla, no se pueden colapsar a un gris). */
  html[data-theme="dark"] .cat-indec { background: #241f38; color: #c0aef5; }
  html[data-theme="dark"] .cat-calendario { background: #133019; color: #86d996; }
  html[data-theme="dark"] .cat-sepa { background: #33220f; color: #f0a361; }
  html[data-theme="dark"] .cat-combustibles { background: #2b2320; color: #d3b4a5; }
  html[data-theme="dark"] .cat-elecciones { background: #1e2340; color: #a3b0f2; }
  html[data-theme="dark"] .cat-feedback { background: #10293d; color: #79bdea; }
  html[data-theme="dark"] .cat-fiscal { background: #341d26; color: #f09ba8; }

  /* La barra de stats es oscura en los dos modos: el gris 400 invertido queda
     corto de contraste sobre ella. */
  html[data-theme="dark"] .stat-label { color: #9fa9b5; }

  /* Los screenshots del paso a paso son capturas de UI clara: sin borde flotan
     como un rectángulo blanco sobre el fondo oscuro. */
  html[data-theme="dark"] .step-img { border-color: var(--gray-300); }

  /* Leaflet: los tiles siguen siendo claros (no hay tileset oscuro sin API key),
     pero el marco y el popup acompañan al tema. */
  html[data-theme="dark"] .leaflet-popup-content-wrapper,
  html[data-theme="dark"] .leaflet-popup-tip { background: var(--surface); color: var(--gray-900); }
  html[data-theme="dark"] .leaflet-container .leaflet-control-attribution { background: rgba(26, 32, 38, 0.85); color: var(--gray-600); }
  html[data-theme="dark"] .leaflet-container .leaflet-control-attribution a { color: var(--link); }

} /* /@media not print */