/* TEMA · paleta y tipografías de NotionWare, en sus dos temas.
   Si un color o fuente se repite en el sitio, se cambia aquí y en ningún otro lado.
   El tema lo pone un script en el <head> (preferencia guardada o la del dispositivo). */
:root{
  --azul:#1f6bff;
  --cian:#3ccfea;
  --cian-claro:#7fe6f7;
  --verde-wa:#22b35a;
  --f-display:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-texto:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-lectura:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --gutter:max(16px,env(safe-area-inset-left),env(safe-area-inset-right));
  --radio:14px;
  --radio-chico:10px;
}

/* Oscuro (también es el respaldo si no hay JS y el dispositivo está en oscuro) */
:root,
:root[data-tema="oscuro"]{
  color-scheme:dark;
  --fondo:#070b22;
  --tarjeta:#0e1536;
  --fila:#141e48;
  --linea:#1e2b57;
  --linea-fuerte:#2a3a66;
  --texto:#eaf2ff;
  --suave:#8fa3c8;
  --acento:#19d3f0;
  --etiqueta:#19d3f0;
  --encendido:#7fe6f7;
  --brillo:#cff7ff;
  --sombra:rgba(0,0,0,.45);
  --wa-fondo:#ffffff;
  --wa-icono:var(--verde-wa);
}

/* Claro */
:root[data-tema="claro"]{
  color-scheme:light;
  --fondo:#f4f7fd;
  --tarjeta:#ffffff;
  --fila:#e8effb;
  --linea:#cfdbf0;
  --linea-fuerte:#b9c9e6;
  --texto:#0b1533;
  --suave:#42526f;
  --acento:#1f6bff;
  --etiqueta:#0e8fb0;
  --encendido:#3ccfea;
  --brillo:#ffffff;
  --sombra:rgba(11,21,51,.14);
  --wa-fondo:var(--verde-wa);
  --wa-icono:#ffffff;
}
@media (prefers-color-scheme:light){
  :root:not([data-tema]){
    color-scheme:light;
    --fondo:#f4f7fd;--tarjeta:#ffffff;--fila:#e8effb;--linea:#cfdbf0;--linea-fuerte:#b9c9e6;
    --texto:#0b1533;--suave:#42526f;--acento:#1f6bff;--etiqueta:#0e8fb0;--encendido:#3ccfea;
    --brillo:#ffffff;--sombra:rgba(11,21,51,.14);--wa-fondo:var(--verde-wa);--wa-icono:#ffffff;
  }
}