/* Tema activo según la hora local del visitante (js/tema.js pone data-tema en <html>).
   Sin atributo o con data-tema="claro" = tema claro (tokens de industry.css).
   Con data-tema="oscuro" = tokens de tema-oscuro.css (acero profundo). */
:root[data-tema="oscuro"]{
  --color-bg:#1d2d3d;
  --color-surface:#24384c;
  --color-text:#f2f2f3;
  --color-accent:#94bce3;
  --color-divider:color-mix(in srgb,#f2f2f3 18%,transparent);
--color-accent-100:#24384c;
  --color-accent-200:#2c455d;
  --color-accent-300:#416180;
  --color-accent-400:#597ea3;
  --color-accent-500:#749dc4;
  --color-accent-600:#a8cdf2;
  --color-accent-700:#b5d9fd;
  --color-accent-800:#d6ebff;
  --color-accent-900:#eef6ff;
--color-neutral-100:#2b2b2d;
  --color-neutral-200:#424244;
  --color-neutral-300:#5d5d60;
  --color-neutral-400:#7a7a7d;
  --color-neutral-500:#98989b;
  --color-neutral-600:#b7b7ba;
  --color-neutral-700:#c4c4c8;
  --color-neutral-800:#e7e7ea;
  --color-neutral-900:#f5f5f8;
--shadow-md:0 3px 10px color-mix(in srgb,#000 35%,transparent);
  color-scheme:dark}

/* Contraste WCAG AA (4,5:1) en el tema claro · entrega de Design 2026-10-27_contraste-AA.
   Normal accent-700 #416180 (5,78:1) · hover accent-800 #2C455D (8,87:1) · active accent-900 #1D2D3D (12,56:1).
   Limitado al tema claro: en el oscuro los mismos tokens tienen otros valores y ya cumple (100 en Lighthouse).
   :not([data-tema="oscuro"]) cubre data-tema="claro" y también el caso sin JS (sin atributo = claro). */
:root:not([data-tema="oscuro"]) .btn-primary { background: var(--color-accent-700); }
:root:not([data-tema="oscuro"]) .btn-primary:hover { background: var(--color-accent-800); }
:root:not([data-tema="oscuro"]) .btn-primary:active { background: var(--color-accent-900); }
:root:not([data-tema="oscuro"]) .lang a[aria-current] { background: var(--color-accent-700); }
:root:not([data-tema="oscuro"]) .tag-outline { color: var(--color-accent-700); }
:root:not([data-tema="oscuro"]) .skip { background: var(--color-accent-700); }