/* ==========================================================================
   N moon — Sistema de estilo v1
   Variables (tokens) y componentes base para webs y apps de la marca.
   Uso: <link rel="stylesheet" href="tokens.css"> y en <body data-tema="noche">
   (o data-tema="dia"). Los componentes usan los roles del tema activo.
   ========================================================================== */

/* Plus Jakarta Sans alojada en la propia web (licencia OFL, ver fonts/OFL.txt).
   Un solo archivo variable cubre los pesos 400 a 700; el juego «latin» alcanza para español.
   index.html la precarga con <link rel="preload"> para no esperar a leer este CSS. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-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;
}

:root {
  /* --- Paleta de marca --------------------------------------------------- */
  --nm-noche: #090B12;      /* fondo del estilo Noche */
  --nm-profundo: #142D69;   /* texto y acciones del estilo Día */
  --nm-luna: #72CFFF;       /* la luna azul: acento protagonista */
  --nm-bruma: #A8B8D8;      /* texto secundario sobre Noche */
  --nm-claro: #E8ECF5;      /* fondo Día y texto principal sobre Noche */
  --nm-blanco: #FFFFFF;

  /* --- Superficies (derivadas de la paleta) ------------------------------ */
  --nm-noche-1: #14161D;    /* tarjetas sobre Noche */
  --nm-noche-2: #1B1D24;    /* elevada / hover */
  --nm-noche-borde: #23262E;
  --nm-dia-1: #FFFFFF;      /* tarjetas sobre Día */
  --nm-dia-2: #DCE2EE;      /* paneles, bloques de apoyo */
  --nm-dia-borde: #CDD4E3;
  --nm-dia-texto-2: #54668F; /* texto secundario sobre Día (AA) */

  /* --- Tipografía --------------------------------------------------------- */
  --nm-fuente: "Plus Jakarta Sans", system-ui, sans-serif;
  --nm-t-display: clamp(36px, 5vw, 56px); /* Bold · 1.04 · -2% */
  --nm-t-h1: clamp(30px, 4vw, 44px);      /* Bold · 1.1  · -2% */
  --nm-t-h2: clamp(22px, 3vw, 28px);      /* Bold · 1.2  · -1% */
  --nm-t-h3: 20px;                        /* Bold · 1.3 */
  --nm-t-texto: 17px;                     /* Regular · 1.6 */
  --nm-t-chico: 14px;                     /* Regular · 1.5 */
  --nm-t-etiqueta: 12.5px;                /* Medium · MAYÚSCULAS · +16% */

  /* --- Espaciado (base 4) ------------------------------------------------- */
  --nm-s-1: 4px;  --nm-s-2: 8px;  --nm-s-3: 12px; --nm-s-4: 16px; --nm-s-5: 24px;
  --nm-s-6: 32px; --nm-s-7: 48px; --nm-s-8: 64px; --nm-s-9: 96px;

  /* --- Bordes redondeados -------------------------------------------------- */
  --nm-r-chico: 12px;    /* inputs, tarjetas pequeñas, ítems de lista */
  --nm-r-medio: 16px;    /* tarjetas, ventanas, posts */
  --nm-r-grande: 24px;   /* paneles y secciones destacadas */
  --nm-r-pildora: 999px; /* botones, etiquetas, chips */

  /* --- Efectos ------------------------------------------------------------- */
  --nm-sombra: 0 24px 50px -24px rgb(20 45 105 / 0.6);
  --nm-halo: radial-gradient(60% 70% at 85% 0%, rgb(20 45 105 / 0.67), transparent 70%);
  --nm-brillo-luna: radial-gradient(circle, rgb(114 207 255 / 0.18), transparent 65%);

  /* --- Movimiento ---------------------------------------------------------- */
  --nm-curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --nm-rapido: 150ms;  /* hover, foco */
  --nm-medio: 250ms;   /* menús, tarjetas */
  --nm-lento: 400ms;   /* entradas de sección, la luna */
}

/* --- Temas: roles de color ------------------------------------------------- */
[data-tema="noche"] {
  --nm-fondo: var(--nm-noche);
  --nm-superficie: var(--nm-noche-1);
  --nm-superficie-2: var(--nm-noche-2);
  --nm-borde: var(--nm-noche-borde);
  --nm-texto: var(--nm-claro);
  --nm-texto-2: var(--nm-bruma);
  --nm-acento: var(--nm-luna);          /* cian: textos destacados, enlaces */
  --nm-accion: var(--nm-luna);          /* fondo del botón principal */
  --nm-accion-texto: var(--nm-noche);
}
[data-tema="dia"] {
  --nm-fondo: var(--nm-claro);
  --nm-superficie: var(--nm-dia-1);
  --nm-superficie-2: var(--nm-dia-2);
  --nm-borde: var(--nm-dia-borde);
  --nm-texto: var(--nm-profundo);
  --nm-texto-2: var(--nm-dia-texto-2);
  --nm-acento: var(--nm-profundo);      /* sobre claro el cian NO se usa en texto */
  --nm-accion: var(--nm-profundo);
  --nm-accion-texto: var(--nm-claro);
}
[data-tema] {
  background: var(--nm-fondo);
  color: var(--nm-texto);
  font-family: var(--nm-fuente);
  font-size: var(--nm-t-texto);
  line-height: 1.6;
}

/* --- Componentes base ------------------------------------------------------ */
.nm-display { font-size: var(--nm-t-display); font-weight: 700; line-height: 1.04; letter-spacing: -0.02em; }
.nm-h1 { font-size: var(--nm-t-h1); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.nm-h2 { font-size: var(--nm-t-h2); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.nm-etiqueta { font-size: var(--nm-t-etiqueta); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nm-acento); }
.nm-secundario { color: var(--nm-texto-2); }

.nm-btn {
  display: inline-flex; align-items: center; gap: var(--nm-s-2);
  padding: 12px 22px; border: 0; border-radius: var(--nm-r-pildora);
  background: var(--nm-accion); color: var(--nm-accion-texto);
  font: 700 15px/1.2 var(--nm-fuente); cursor: pointer; text-decoration: none;
  transition: transform var(--nm-rapido) var(--nm-curva), filter var(--nm-rapido) var(--nm-curva);
}
.nm-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.nm-btn:focus-visible { outline: 2px solid var(--nm-luna); outline-offset: 3px; }
.nm-btn--secundario { background: transparent; color: var(--nm-texto); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nm-texto) 25%, transparent); }

.nm-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: var(--nm-r-pildora); background: var(--nm-superficie-2);
  font-size: 13px; font-weight: 500; color: var(--nm-texto);
}

.nm-tarjeta {
  background: var(--nm-superficie); border: 1px solid var(--nm-borde);
  border-radius: var(--nm-r-medio); padding: var(--nm-s-5);
}
[data-tema="dia"] .nm-tarjeta { border-color: transparent; box-shadow: var(--nm-sombra); }

.nm-halo { background: var(--nm-halo), var(--nm-fondo); }

@media (prefers-reduced-motion: reduce) {
  .nm-btn { transition: none; }
}