/* ==========================================================================
   tokens.css — base compartida por el home y las páginas de proyecto.
   Se carga SIEMPRE antes de styles.css / project.css, así cada hoja puede
   sobrescribir lo que necesite.

   Contiene tres cosas y nada más:
     1. La tipografía, autoalojada (antes venía de fonts.googleapis.com).
     2. Los tokens de color y forma, que estaban duplicados en las dos hojas.
     3. El badge "en producción", que también estaba duplicado.
   ========================================================================== */

/* ------------------------------------------------------------- TIPOGRAFÍA
   Nunito variable (200–1000), autoalojada en /assets/fonts.
   Se bajó solo el corte normal: los 16 <em> del sitio están dentro de
   .proj-meta-value em, que fuerza font-style: normal — la itálica no se
   usa en ningún lado y no vale la pena descargarla. */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- TOKENS */
:root {
  --navy: #1B2A4A;
  --navy-light: #2A3F6F;
  --navy-muted: #E8EDF5;
  --accent: #2563EB;
  --text: #111827;
  --muted: #6B7280;
  --bg: #F5F6F8;
  --white: #FFFFFF;

  /* Señal de "en producción" */
  --live: #12A150;
  --live-ink: #0B7A3D;
  --live-wash: #ECFDF3;
  --live-edge: rgba(18, 161, 80, .20);

  /* Misma señal en ámbar, para lo que está en beta y no en producción */
  --beta: #D97706;
  --beta-ink: #92400E;
  --beta-wash: #FFFBEB;
  --beta-edge: rgba(217, 119, 6, .25);

  --radius: 16px;
  --shadow: 0 1px 3px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05);
}

/* ------------------------------------------------- BADGE "EN PRODUCCIÓN"
   Pill al lado del nombre del proyecto. Muy bajo contraste a propósito:
   el punto que pulsa es lo único que llama, el resto acompaña. */
.project-live,
.proj-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: var(--live-wash);
  border: 1px solid var(--live-edge);
  color: var(--live-ink);
  letter-spacing: .03em;
  line-height: 1.5;
  white-space: nowrap;
}

/* En la grilla del home el título es de 17px */
.project-live {
  margin-left: 8px;
  padding: 2px 8px 2px 6px;
  font-size: 10px;
  font-weight: 600;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* En la página de proyecto el título es de 40px y ya resuelve el espaciado
   con gap, por eso acá no lleva margin */
.proj-live {
  gap: 6px;
  padding: 3px 10px 3px 8px;
  font-size: 11px;
  font-weight: 700;
  align-self: center;
}

/* Variante beta: mismo pill, otra señal. "En producción" y "Beta pública" no
   son lo mismo y no deberían leerse igual. */
.project-live--beta,
.proj-live--beta {
  background: var(--beta-wash);
  border-color: var(--beta-edge);
  color: var(--beta-ink);
}

.project-live--beta .live-dot,
.proj-live--beta .live-dot { background: var(--beta); }

.project-live--beta .live-dot::after,
.proj-live--beta .live-dot::after { border-color: var(--beta); }

.live-dot {
  position: relative;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--live);
  flex-shrink: 0;
}

.live-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--live);
  animation: livePulse 2.8s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
}

@keyframes livePulse {
  0%   { transform: scale(.55); opacity: .6; }
  70%  { transform: scale(1.7);  opacity: 0; }
  100% { transform: scale(1.7);  opacity: 0; }
}