/* ============================================================
   AOLAB · DESIGN TOKENS
   Estética de la calculadora ICA (prototipo de Alberto), aplicada a todo el sistema:
   fondo azul profundo, superficies de vidrio, el azul eléctrico de BactiQuant como color
   de marca (el de la primera versión del sistema), un color por
   plano de medición, Space Grotesk para leer y Space Mono para los números.

   Los nombres --ao-* se conservan a propósito: todo el CSS existente los usa, y cambiar
   su VALOR cambia la estética sin tocar cada regla. Ojo con el significado de --ao-ink:
   antes era el azul marino del chrome; ahora es el color del TEXTO principal, porque en
   tema oscuro el texto es lo claro. El fondo del chrome pasó a --ao-chrome.
   ============================================================ */

:root {
  /* ---- Superficies (de lo más profundo a lo más elevado) ---- */
  --ao-chrome:     #07111F;  /* appbar y menú lateral */
  --ao-base:       #0A1628;  /* fondo de página */
  --ao-white:      #0F1E35;  /* tarjetas, paneles, diálogos (el nombre viene del tema claro) */
  --ao-surface-2:  #0D2240;  /* campos, filas destacadas, zonas hundidas */
  --ao-surface-3:  #13294A;  /* hover sobre superficie */
  --ao-glass:      rgba(255,255,255,.04);

  /* ---- Líneas ---- */
  --ao-border:     #1F3252;  /* bordes de campos y tarjetas */
  --ao-divider:    #172842;  /* divisores sutiles */
  --ao-cloud:      #24395C;

  /* ---- Texto ---- */
  --ao-ink:        #F0F6FF;  /* texto principal */
  --ao-text:       var(--ao-ink);
  --ao-muted:      #7A9BB5;  /* texto secundario */
  --ao-text-muted: var(--ao-muted);
  --ao-mist:       #8FA9C2;  /* menú lateral, íconos */
  --ao-slate:      #2A3B6B;
  --ao-text-on-dark: #F0F6FF;

  /* ---- Marca: azul eléctrico de BactiQuant (el de la primera versión del sistema) ---- */
  --ao-blue:       #2D58FF;  /* interacción: botones, foco, selección, nav activo */
  --ao-blue-dark:  #1B45E0;  /* hover de los rellenos (misma rampa) */
  --ao-blue-lite:  #6E8CFF;  /* tintes y hover de enlaces */
  --ao-blue-rgb:   45,88,255;
  --ao-blue-text:  #6E8CFF;  /* el azul como TEXTO sobre fondo oscuro: el #2D58FF da 3,1:1 y no se
                                lee en letra chica; su versión clara da 5,4:1 */
  --ao-on-accent:  #FFFFFF;  /* texto sobre fondo azul (5,3:1) */
  --ao-ink-soft:   #0D2240;
  --ao-orange:     #F5A623;
  --ao-gold:       #F5C043;
  --ao-gold-lite:  #F5C043;

  /* ---- Un color por plano (igual en todo el sistema) ---- */
  --ao-plano-fq:   #38B8E0;
  --ao-plano-prod: #F5A623;
  --ao-plano-bio:  #4FD18B;
  --ao-plano-op:   #E85D4A;

  /* ---- Estados ---- */
  --ao-success: #4FD18B;
  --ao-info:    #38B8E0;
  --ao-warning: #F5A623;
  --ao-danger:  #E85D4A;

  /* ---- Tipografía ---- */
  --ao-font-display: "Space Grotesk", system-ui, sans-serif;
  --ao-font-text:    "Space Grotesk", system-ui, sans-serif;
  --ao-font-mono:    "Space Mono", ui-monospace, monospace;

  /* ---- Radios ---- */
  --ao-radius-sm:   8px;
  --ao-radius-md:   12px;
  --ao-radius-lg:   16px;
  --ao-radius-pill: 999px;

  /* ---- Elevación: en oscuro se nota más el borde que la sombra ---- */
  --ao-shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --ao-shadow-md: 0 4px 14px rgba(0,0,0,.40);
  --ao-shadow-lg: 0 14px 40px rgba(0,0,0,.55);

  color-scheme: dark;
}