/*
  Sistema de diseño BQSense (rediseño 2026, ver Claude-Design/design_handoff_bqsense_redesign/README.md).
  Reglas de uso validadas por contraste WCAG AA real:

  - --color-secondary (cian) y --color-accent (naranja) NUNCA como texto sobre
    fondo claro (fallan incluso el umbral de 3:1 de componente UI/texto
    grande: 2.29–2.61:1). Sí cumplen AA como texto/icono sobre fondo oscuro
    (6.66–7.72:1). Como relleno de badge/botón son válidos en cualquier modo
    siempre que el texto encima use el color correcto (ver --color-btn-primary-text
    y la regla de badges numerados en home.css).
  - --color-link resuelve los enlaces de texto en línea: --color-primary en
    claro (10.68–11.45:1), --color-secondary en oscuro (7.09–7.72:1).
  - --color-accent-text resuelve las etiquetas pequeñas en mayúsculas
    (eyebrow del hero, fecha de noticias) que el diseño pide en naranja: en
    claro se usa un ámbar más oscuro (#a34e00, 5.37–5.76:1) porque el naranja
    de marca no pasa AA a ningún tamaño sobre fondo claro; en oscuro se usa
    el naranja de marca real (pasa AA).
  - --color-text-muted pasa AA-normal en ambos modos con los valores 2026
    (5.37–7.73:1 según combinación), a diferencia de la paleta anterior.
*/
:root {
  --color-primary: #0d3b66;
  --color-secondary: #00b4db;
  --color-accent: #ff7a00;
  --color-accent-text: #a34e00;

  --color-bg: #f6f7f9;
  --color-surface: #ffffff;
  --color-surface-alt: #eef1f4;
  --color-text: #111827;
  --color-text-muted: #5b6472;
  --color-border: #e6e9ed;
  --color-nav-bg: rgba(246, 247, 249, 0.85);

  --color-error: #b3261e;
  --color-link: var(--color-primary);

  /* Botón primario / CTA / pill HelpDesk (research.md 003 §2, actualizado 2026) */
  --color-btn-primary-bg: var(--color-primary);
  --color-btn-primary-text: #ffffff;

  --font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;

  /* 10px: botones, inputs, tarjeta de logros. 16px: badges/cards pequeñas.
     20px: tarjetas grandes (formulario, artículo de noticias). */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;
}

/* Modo oscuro: superficies e texto invierten; cian pasa a ser el relleno del
   botón primario (con texto casi negro, no blanco: #0a1119 sobre #00b4db da
   7.72:1, blanco solo 1.9:1); naranja/cian recuperan uso directo como texto. */
[data-theme="dark"] {
  --color-bg: #0a1119;
  --color-surface: #111b24;
  --color-surface-alt: #0d1620;
  --color-text: #ffffff;
  --color-text-muted: #9aa7b4;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-nav-bg: rgba(10, 17, 25, 0.85);

  /* #b3261e falla AA sobre bg-dark (2.74:1); se usa un rojo claro (6.45:1) */
  --color-error: #ff6b6b;
  --color-link: var(--color-secondary);
  --color-accent-text: var(--color-accent);

  --color-btn-primary-bg: var(--color-secondary);
  --color-btn-primary-text: #0a1119;
}