/* tokens.css — las variables de las que sale todo lo visual.
 *
 * F1 deja la interfaz deliberadamente cruda: lo que importa ahora son los
 * datos. El sistema visual definitivo entra en F6. Pero los colores se
 * declaran como variables desde el principio para que F6 sea cambiar este
 * archivo y no perseguir codigos de color por todo el proyecto.
 *
 * El verde #1a6b3c viene de la app anterior y es la identidad de Mi Salud.
 */

:root {
  color-scheme: light dark;

  /* identidad */
  --verde: #1a6b3c;
  --verde-hondo: #14532d;
  --verde-suave: #e8f3ec;

  /* semaforo clinico — se usan tal cual en las tarjetas de metrica */
  --ok: #1a6b3c;
  --ok-fondo: #e8f3ec;
  --ambar: #b45309;
  --ambar-fondo: #fef3e2;
  --alerta: #c53030;
  --alerta-fondo: #fdeaea;
  --sin-dato: #94a3a0;
  --sin-dato-fondo: #f1f5f4;

  /* superficies */
  --fondo: #f7f9f8;
  --tarjeta: #ffffff;
  --borde: #dfe8e4;

  /* texto */
  --texto: #1c2b26;
  --texto-2: #48605a;
  --texto-3: #7b918a;

  /* forma */
  --radio: 14px;
  --radio-chico: 10px;
  --sombra: 0 1px 2px rgba(20, 40, 33, .06);

  /* tamaño minimo de cualquier cosa que se toque con el dedo */
  --toque: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --verde: #4ade80;
    --verde-hondo: #86efac;
    --verde-suave: #12251b;

    --ok: #4ade80;
    --ok-fondo: #12251b;
    --ambar: #fbbf24;
    --ambar-fondo: #2a2010;
    --alerta: #f87171;
    --alerta-fondo: #2c1414;
    --sin-dato: #6b807a;
    --sin-dato-fondo: #16211d;

    --fondo: #0f1613;
    --tarjeta: #16211d;
    --borde: #26352f;

    --texto: #e6efeb;
    --texto-2: #a9beb7;
    --texto-3: #7b918a;

    --sombra: 0 1px 2px rgba(0, 0, 0, .3);
  }
}