/* Tokens de diseño: el único sitio donde se definen los colores.
   Cada color lleva su valor claro y oscuro con light-dark(); el botón de tema solo cambia color-scheme. */
:root{
  color-scheme:light dark;
  --bg:light-dark(#EEF3FA,#071022);
  --surface:light-dark(#FFFFFF,#0E1A33);
  --surface-2:light-dark(#F2F6FC,#13223F);
  --ink:light-dark(#0B1B3A,#E8EEFA);
  --muted:light-dark(#5A6A86,#93A3C2);
  --line:light-dark(#DAE3F0,#22345A);

  --brand:light-dark(#1646C8,#6C95FF);       /* azul de marca: enlaces, activo, avatar propio */
  --brand-soft:light-dark(#E4ECFD,#16284F);  /* fondo suave del elemento activo o propio */
  --brand-ink:light-dark(#FFFFFF,#071022);
  --hero-a:#0B3FB0; --hero-b:#071C5C;        /* azules del héroe y de las tarjetas oscuras */
  --accent:#F26A21;                          /* naranja: rellenos y textos grandes */
  --accent-strong:#CF4A0B;                   /* naranja para texto pequeño (contraste AA con blanco) */
  --accent-ink:#FFFFFF;

  --good:light-dark(#14804F,#4FD08F); --good-bg:light-dark(#DDF3E7,#12382A);
  --warn:light-dark(#9A5B00,#F0B34A); --warn-bg:light-dark(#FBEBCF,#3A2D10);
  --bad:light-dark(#C0392B,#FF8A80);  --bad-bg:light-dark(#F9E0DD,#3E1B1B);
  --gold:light-dark(#B07A00,#F0BC3E); --gold-bg:light-dark(#F8EDCB,#3A300F);
  --blue:var(--brand);

  --field-a:light-dark(#1D6B47,#14583A);     /* césped del campo de "Mi once" */
  --field-b:light-dark(#1A6141,#115034);
  --pitch:var(--field-a); --chalk:#F4FAF6;

  --shadow:0 1px 2px rgba(5,15,40,.08),0 10px 28px rgba(5,15,40,.12);
  --r:16px;
  --gut:16px;                                /* margen lateral de la página */
  --f-display:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --f-body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'Spline Sans Mono',ui-monospace,Menlo,monospace;
}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
@media (min-width:900px){:root{--gut:24px}}