/* ============================================================
   tokens.css
   ------------------------------------------------------------
   Fuente Gotham y variables de diseño del sitio.

   Es la ÚNICA definición de @font-face y de :root del proyecto.
   Antes estaba repetida en tres sitios (style.css, el <style>
   embebido de index.html y ecosistema/chrome.css).

   Se carga como primera hoja de estilos en BaseLayout.astro, por
   lo que cualquier archivo posterior (global.css, style.css,
   eco.css…) puede sobrescribir lo que necesite.
   ============================================================ */

/* ── Tipografía ── */
@font-face {
  font-family: "Gotham";
  src: url("/assets/fonts/gotham/Gotham-Thin.woff") format("woff");
  font-style: normal;
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: "Gotham";
  src: url("/assets/fonts/gotham/Gotham-Book.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Gotham";
  src: url("/assets/fonts/gotham/Gotham-Regular.woff") format("woff");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Gotham";
  src: url("/assets/fonts/gotham/Gotham-Bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Gotham";
  src: url("/assets/fonts/gotham/Gotham-Black.woff") format("woff");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

/* ── Variables de color y tipografía ── */
:root {
  --color-white: #ffffff;
  --color-pink: #ff0069;
  --color-cyan: #10d4ff;
  --color-navy: #00174c;
  --color-blue: #16309a;
  --color-gray: #464d5a;
  --color-indigo: #3a5bcc;
  --color-translucent: #cdd4f340;
  --color-pink-soft: #ff4090;
  --font-gotham: "Gotham", sans-serif;
  --color-black: #020305;
  --bg-mobile-menu: #050a2e;
  --mk-pink: #ff0068;
  --btn-border-radius: 10px;
}

/* El header, el menú móvil y el footer usan siempre Gotham, incluso en
   páginas cuyo cuerpo utiliza otra tipografía (p. ej. /ecosistema/, que
   usa Inter desde eco.css). */
.header-container,
.header-container *,
.mobile-menu,
.mobile-menu *,
#footer-ec,
#footer-ec * {
  font-family: var(--font-gotham);
}