/**
 * Identidad visual del sitio — tema "Aurora Glass", el mismo de la app.
 *
 * Existe porque las cinco páginas repetían su propia paleta en un `<style>` inline, y con dos
 * convenciones de nombres distintas según cuándo se escribió cada una (`--oro`/`--fondo` en unas,
 * `--gold`/`--bg` en otras). El resultado: el sitio se quedó en el dorado anterior al rediseño de
 * la app, y actualizarlo obligaba a editar cinco archivos sin olvidarse de ninguno.
 *
 * Los valores salen de `frontend/src/theme/noir.ts`. Si allá cambia la paleta, acá también.
 *
 * Se conservan los DOS juegos de nombres como alias del mismo valor. Renombrarlos en las cinco
 * páginas habría sido un diff grande por ninguna ganancia; lo que importa es que ahora hay una
 * sola fuente de verdad, no cómo se llama cada variable.
 */

/* Tipografías de la app: Bebas Neue para títulos, Poppins para texto, Roboto Mono para apoyo.
   Va PRIMERO, antes de cualquier otra regla: la especificación de CSS exige que `@import` preceda
   a todo lo demás y, si no, el navegador lo ignora en silencio y el sitio cae a la fuente del
   sistema sin que nada falle a la vista. */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@400;500;600&family=Roboto+Mono:wght@400;500&display=swap');

:root {
  color-scheme: dark;

  /* Paleta Aurora Glass — refleja los tokens `noir.*` de la app. */
  --acento: #a78bfa;          /* el acento es LILA; el nombre "oro" es histórico */
  --acento-suave: #c9b8fb;
  --sobre-acento: #2a1a3d;
  --fondo: #0d0a12;
  --fondo-2: #151020;
  --superficie: rgba(255, 255, 255, 0.055);
  --borde: rgba(255, 255, 255, 0.08);
  --texto: #f3eefa;
  --texto-2: #c8bcd9;
  --texto-3: #8f8399;
  --exito: #34d399;

  /* Alias en inglés: los usan las páginas escritas con la otra convención. */
  --oro: var(--acento);
  --gold: var(--acento);
  --bg: var(--fondo);
  --surface: var(--superficie);
  --border: var(--borde);
  --text: var(--texto);
  --text-dim: var(--texto-3);
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.65;
  /* El degradado es lo que hace legible el "vidrio" de las tarjetas: sobre un negro plano las
     superficies translúcidas se ven grises y muertas. Mismo motivo que AppBackground en la app. */
  background-image:
    radial-gradient(60rem 40rem at 15% -10%, rgba(167, 139, 250, 0.10), transparent 60%),
    radial-gradient(50rem 35rem at 90% 5%, rgba(167, 139, 250, 0.06), transparent 60%);
  background-attachment: fixed;
}

h1,
h2,
h3 {
  font-family: 'Bebas Neue', 'Poppins', sans-serif;
  letter-spacing: 0.06em;
  color: var(--texto);
  font-weight: 400;
}

h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 4vw, 2rem); margin-top: 2.5rem; }

a { color: var(--acento); }

/* Detalle de marca: el mismo halo lila que rodea las tarjetas hero de la app. */
.acento { color: var(--acento); }

code,
.mono {
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}