/* ==========================================================================
   Escuelita Archiving · tokens de diseño (fuente única de color y tipografía)
   Origen: docs/mockup-referencia.html (<style id="appstyle">, :root). Mismos nombres que el mock para que el
   markup portado use las mismas variables. Tema: :root[data-theme="light|dark"]; sin atributo = sistema.
   Colores extra del mock (equipo dulce/salado, encabezado de grupo de la ficha) también como token.
   Cargado sin @layer a propósito (lo lee el build de Tailwind y el navegador tal cual).
   ========================================================================== */

@font-face { font-family: "Poppins"; font-weight: 300; font-display: swap; src: url("../fonts/poppins-300.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../fonts/plexmono-500.woff2") format("woff2"); }

:root{
  --bg:#f4f7f8; --surface:#ffffff; --surface2:#eef3f4; --line:#dbe3e8; --fg:#0b1d31; --muted:#5b6b79;
  --navy:#0b1d31; --navy2:#12293a; --accent:#0e7a52; --accent2:#20b77a; --mint:#e3f5ed;
  --warn:#8a5a00; --warnbg:#fdf3dc; --bad:#c03a3a; --badbg:#fbe6e6; --band-fg:#ffffff; --band-muted:#9fb3c2; --green:#2fd39a; --th:#0e7a52; --th-fg:#ffffff;
  --display:"Poppins",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  /* Accesibilidad (WCAG AA) — desvío consciente del mock: --warn era #b7791f (3,3:1 sobre --warnbg, ahora 5,4:1);
     --line-strong: bordes de controles ≥ 3:1; --focus: anillo de foco ≥ 3:1 sobre fondos claros (el mock usaba
     --accent2, 2,4:1 sobre blanco); --bad-fg: texto del botón de peligro. */
  --line-strong:#7d8d9a; --focus:#0e7a52; --bad-fg:#ffffff;
  /* Encabezados de pantalla (banda de Selection Day, hero de Bienvenida), D-26: claros en tema claro. */
  --hdr-bg:#ffffff; --hdr-fg:#0b1d31; --hdr-muted:#5b6b79; --hdr-eyebrow:#0e7a52; --hdr-kpi-bg:#f4f7f8; --hdr-kpi-line:#dbe3e8;
  --hdr-bar:#e3e9ec; --hdr-bar-fill:#20b77a; --hdr-pattern:rgba(14,122,82,.07); --hdr-focus:#0e7a52; --hdr-logo-filter:brightness(0);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#08131f; --surface:#0f2131; --surface2:#142a3c; --line:#22394b; --fg:#e8f0f4; --muted:#93a8b7;
  --accent:#2fd39a; --accent2:#20b77a; --mint:#123a2e; --warn:#f0bd55; --warnbg:#3a2e12; --bad:#ff7b7b; --badbg:#3c1b1f; color-scheme:dark;
  --line-strong:#5f7a90; --focus:#20b77a; --bad-fg:#0b1d31;
  --hdr-bg:#0b1d31; --hdr-fg:#ffffff; --hdr-muted:#9fb3c2; --hdr-eyebrow:#2fd39a; --hdr-kpi-bg:rgba(255,255,255,.05); --hdr-kpi-line:rgba(255,255,255,.12);
  --hdr-bar:rgba(255,255,255,.12); --hdr-bar-fill:#2fd39a; --hdr-pattern:rgba(47,211,154,.13); --hdr-focus:#20b77a; --hdr-logo-filter:none}}
:root[data-theme="dark"]{
  --bg:#08131f; --surface:#0f2131; --surface2:#142a3c; --line:#22394b; --fg:#e8f0f4; --muted:#93a8b7;
  --accent:#2fd39a; --accent2:#20b77a; --mint:#123a2e; --warn:#f0bd55; --warnbg:#3a2e12; --bad:#ff7b7b; --badbg:#3c1b1f; color-scheme:dark;
  --line-strong:#5f7a90; --focus:#20b77a; --bad-fg:#0b1d31;
  --hdr-bg:#0b1d31; --hdr-fg:#ffffff; --hdr-muted:#9fb3c2; --hdr-eyebrow:#2fd39a; --hdr-kpi-bg:rgba(255,255,255,.05); --hdr-kpi-line:rgba(255,255,255,.12);
  --hdr-bar:rgba(255,255,255,.12); --hdr-bar-fill:#2fd39a; --hdr-pattern:rgba(47,211,154,.13); --hdr-focus:#20b77a; --hdr-logo-filter:none}
/* Sobre las superficies navy (barra lateral, bandas, encabezados, toasts) el foco sigue en --accent2, como el mock. */
.side,.band,.home-hero,.pres-head,.login-hero,.toasts{--focus:var(--accent2)}
:root{
  --hgroup:#0b5c3f;                       /* encabezado de grupo de la ficha */
  --sweet-bg:#fde7ef; --sweet-fg:#a3264f; /* 🍫 Team dulce */
  --savory-bg:#fff1d6; --savory-fg:#8a5a00; /* 🧀 Team salado */
  --backdrop:rgba(5,12,20,.55);
  --radius-card:12px; --radius-input:8px; --radius-pill:99px;
}