/* ===== tokens.css — sistema de diseño (paleta Praxiom) =====
   Única fuente de verdad de colores/tipografía/radios. Oscuro por defecto;
   body.light activa el tema claro. Los nombres legacy (--bg, --accent, --green…)
   se conservan porque el JS los referencia en estilos inline. */

/* Fuente Inter AUTO-HOSPEDADA (privacidad: no filtra IP a Google; funciona offline).
   Variable woff2, subconjunto latino. Si falla, cae a la fuente de sistema (--font). */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-display:swap;
  font-weight:300 800;
  src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";
  font-style:italic;
  font-display:swap;
  font-weight:300 800;
  src:url("../fonts/inter-latin-wght-italic.woff2") format("woff2");
}

:root{
  /* superficies */
  --bg:        hsl(222 24% 5%);
  --bg2:       hsl(222 26% 4%);
  --bg3:       hsl(222 20% 10%);
  --card:      hsl(222 22% 7%);
  --card2:     hsl(222 20% 9%);
  --border:    hsl(222 18% 13%);
  --border2:   hsl(222 16% 17%);
  /* texto (oscuro): secundario/terciario subidos para que no se vean tan apagados */
  --text:      hsl(220 18% 94%);
  --text2:     hsl(220 13% 75%);
  --text3:     hsl(220 11% 62%);
  /* marca */
  --accent:      hsl(234 90% 66%);
  --accent-h:    hsl(234 90% 60%);
  --accent-glow: hsl(234 80% 74%);
  /* color de la red de partículas del fondo (oscuro: índigo suave) */
  --net-color:   hsl(234 78% 72%);
  /* semánticos */
  --green:  hsl(150 70% 45%);
  --red:    hsl(0 65% 55%);
  --orange: hsl(38 92% 56%);
  --yellow: hsl(45 90% 55%);
  --purple: hsl(260 80% 70%);
  /* forma y tipo */
  --radius:    12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --font: Inter, "Segoe UI Variable Text", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* sombras */
  --shadow-1: 0 1px 2px rgb(0 0 0 / .35);
  --shadow-2: 0 8px 30px rgb(0 0 0 / .35);
  /* tintes derivados (transparencias de marca) */
  --accent-a06: color-mix(in srgb, var(--accent) 6%, transparent);
  --accent-a10: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-a16: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-a25: color-mix(in srgb, var(--accent) 25%, transparent);
  color-scheme: dark;
}

body.light{
  --bg:        hsl(0 0% 98%);
  --bg2:       hsl(0 0% 100%);
  --bg3:       hsl(0 0% 94%);
  --card:      hsl(0 0% 100%);
  --card2:     hsl(0 0% 97%);
  --border:    hsl(0 0% 88%);
  --border2:   hsl(0 0% 82%);
  --text:      hsl(0 0% 10%);
  --text2:     hsl(0 0% 40%);
  --text3:     hsl(0 0% 58%);
  --accent:      hsl(235 100% 55%);
  --accent-h:    hsl(235 100% 48%);
  --accent-glow: hsl(235 80% 65%);
  /* claro: red del fondo en gris-azulado MUY diluido (poca saturación) para no distraer */
  --net-color:   hsl(224 14% 72%);
  --green:  hsl(150 65% 34%);
  --red:    hsl(0 70% 45%);
  --orange: hsl(35 85% 44%);
  --yellow: hsl(45 90% 40%);
  --purple: hsl(260 70% 50%);
  --shadow-1: 0 1px 2px rgb(16 24 40 / .06);
  --shadow-2: 0 8px 30px rgb(16 24 40 / .08);
  color-scheme: light;
}