/* Newscience: tokens de marca (Brand guidelines 2026, "Brandbook NS.pdf").
 *
 * Paleta oficial (p. 7 del brandbook): teal #0093A9 #2CADC1 #76D4E2 #E8FCFF;
 * verde #80BA27 #93C93F #C0E784 #F2FFDD; lima #C9D300 #EBF26C #FAFF97 #FDFFDA;
 * grises #474747 #6F6F6E #9F9F9F #F7F7F7. Navy #19213D, #6D758F y #E1E4ED son
 * los de la maquetación del brandbook (títulos, párrafos y divisores).
 *
 * Derivados propios (el brandbook no define UI): --ns-teal-strong oscurece el
 * teal para que el texto blanco de botones cumpla WCAG AA (5,2:1); #0093A9 con
 * blanco da 3,6:1. Error y éxito tampoco vienen en la guía.
 *
 * Tipografía: Metropolis (Unlicense, dominio público), servida desde el propio
 * sitio porque la CSP solo permite recursos 'self'.
 */

@font-face { font-family: "Metropolis"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/metropolis-latin-400-normal.7b9a798c0a74.woff2") format("woff2"); }
@font-face { font-family: "Metropolis"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/metropolis-latin-500-normal.372fc7d16a6d.woff2") format("woff2"); }
@font-face { font-family: "Metropolis"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/metropolis-latin-700-normal.dc6926c36da3.woff2") format("woff2"); }
@font-face { font-family: "Metropolis"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/metropolis-latin-800-normal.a4c4274ea3e1.woff2") format("woff2"); }

:root {
  --ns-font: "Metropolis", "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ns-teal: #0093A9;
  --ns-teal-strong: #00788A;
  --ns-teal-300: #2CADC1;
  --ns-teal-200: #76D4E2;
  --ns-teal-50: #E8FCFF;
  --ns-green: #80BA27;
  --ns-green-50: #F2FFDD;
  --ns-lime: #C9D300;
  --ns-navy: #19213D;
  --ns-gray-dark: #474747;
  --ns-slate: #5F677F;
  --ns-slate-light: #6D758F;
  --ns-line: #E1E4ED;
  --ns-surface: #F8FAFF;

  /* Semánticos (claro) */
  --ns-bg: var(--ns-surface);
  --ns-card: #FFFFFF;
  --ns-heading: var(--ns-navy);
  --ns-text: var(--ns-gray-dark);
  --ns-muted: var(--ns-slate);
  --ns-border: var(--ns-line);
  --ns-accent: var(--ns-teal);
  --ns-link: var(--ns-teal-strong);
  --ns-button-bg: var(--ns-teal-strong);
  --ns-button-hover: #00636F;
  --ns-button-fg: #FFFFFF;
  --ns-error: #B42318;
  --ns-error-bg: #FEF3F2;
  --ns-success: #3D6B0B;
  --ns-success-bg: var(--ns-green-50);
  --ns-focus: var(--ns-teal-300);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ns-bg: #0F1426;
    --ns-card: #19213D;
    --ns-heading: #F2F4FA;
    --ns-text: #DCE0EA;
    --ns-muted: #A9B0C5;
    --ns-border: #2E3757;
    --ns-accent: var(--ns-teal-200);
    --ns-link: var(--ns-teal-200);
    --ns-button-bg: var(--ns-teal-strong);
    --ns-button-hover: var(--ns-teal);
    --ns-error: #FDA29B;
    --ns-error-bg: #3A1512;
    --ns-success: #C0E784;
    --ns-success-bg: #1F2A12;
  }
}