/* Situ: variables de marca. Carga las fuentes con el @import de abajo. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@700;800&family=Figtree:wght@400;500;700&family=IBM+Plex+Mono:wght@500&display=swap");

:root{
  --fondo: #f6f9f7;
  --superficie: #ffffff;
  --verde-suave: #e2f7ee;
  --linea: #d5e0db;
  --tinta: #0a151c;
  --tinta-media: #46575e;
  --verde: #00cc84;
  --verde-hover: #00b874;
  --en-verde: #0a151c;
  --verde-texto: #007a4d;
  --noche: #0a151c;
  --en-noche: #ffffff;
  --error: #b3261e;
  --foco: #007a4d;
  --font-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --font-texto: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-icono: 22%;
  --sombra-1: 0 1px 2px rgba(10,21,28,0.08), 0 6px 16px rgba(10,21,28,0.06);
}

/* Tema oscuro: sigue al sistema, salvo que el visitante elija otro (data-tema en <html>). */
@media (prefers-color-scheme: dark){
 :root:not([data-tema="claro"]){
   --fondo: #08121a;
   --superficie: #122028;
   --verde-suave: #0f2a22;
   --linea: #22343c;
   --tinta: #eef3f1;
   --tinta-media: #9cb0a9;
   --verde: #00f293;
   --verde-hover: #3df7ac;
   --en-verde: #0a151c;
   --verde-texto: #00f293;
   --noche: #122028;
   --en-noche: #eef3f1;
   --error: #ff8a80;
   --foco: #00f293;
   --sombra-1: 0 1px 2px rgba(0,0,0,0.5);
 }
}
:root[data-tema="oscuro"]{
  --fondo: #08121a;
  --superficie: #122028;
  --verde-suave: #0f2a22;
  --linea: #22343c;
  --tinta: #eef3f1;
  --tinta-media: #9cb0a9;
  --verde: #00f293;
  --verde-hover: #3df7ac;
  --en-verde: #0a151c;
  --verde-texto: #00f293;
  --noche: #122028;
  --en-noche: #eef3f1;
  --error: #ff8a80;
  --foco: #00f293;
  --sombra-1: 0 1px 2px rgba(0,0,0,0.5);
}