/*
  Variables de tema — Elena Climent.
  Paleta: Opcion B (grafito / acento salvia, dark mode), elegida 2026-08-17.
  Cambiar la paleta o la tipografia de cuerpo es editar solo este archivo.
*/

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

:root {
  /* Color — fondo gris neutro puro (sin tinte). Dos acentos (2026-08-17):
     el salvia claro original (nav, "Mas sobre mi", buscador enfocado) y uno
     secundario mas oscuro para chips/idioma. Cada acento trae su propio
     color de texto porque el contraste que necesitan es distinto: el salvia
     claro (#9db287) pide texto oscuro (~7.4:1); el secundario oscuro
     (#5e6953) pide texto claro (~4.6:1) — con texto oscuro ahi caia a
     ~2.9:1, por debajo del minimo de 3:1 para componentes de UI. */
  --color-fondo: #151515;
  --color-fondo-elevado: #272727;
  --color-texto: #e6e6dd;
  --color-texto-tenue: #a9ab9f;
  --color-blanco: #ffffff;
  --color-acento: #9db287;
  --color-acento-texto: #1c1c1c;
  --color-acento-secundario: #5e6953;
  --color-acento-secundario-texto: var(--color-texto);
  /* Azul dedicado a los chips de filtro y al buscador enfocado (2026-08-18,
     valor final pedido por el usuario). Contraste con texto claro: ~8.5:1,
     de sobra para texto normal y para el blanco bold del buscador. */
  --color-acento-filtros: #224157;
  --color-acento-filtros-texto: var(--color-texto);
  --color-linea: rgba(230, 230, 221, 0.14);
  /* Estados compartidos por toda la familia de botones (nav, chips,
     "Mas sobre mi", toggle de idioma): inactivo = gris casi invisible;
     hover = un peldano mas claro. El estado "activo" de cada uno usa su
     propio acento (arriba), no estos dos. */
  --color-boton-inactivo: #1f1f1f;
  --color-boton-hover: #262626;

  /* Tipografia — ElenaScript en todo por decision del 2026-08-17 (nombre en bold, cuerpo en regular).
     --font-cuerpo-fallback queda lista para intercambiar en un bloque puntual si pidiera mas aire. */
  --font-titulo: "ElenaScript", Arial, sans-serif;
  --font-cuerpo: "ElenaScript", Arial, sans-serif;
  --font-cuerpo-fallback: Georgia, "Iowan Old Style", "Palatino Linotype", serif;

  /* Layout */
  /* Nombre historico ("chip") de cuando los botones eran pildoras — el
     valor cambio a rectangulo (2026-08-17), el nombre se quedo igual para
     no tocar cada selector que lo usa. */
  --radio-chip: 6px;
  --alto-menu: 3.5rem;
  /* Altura comun a todos los botones del sitio (menu, chips, toggle de
     idioma, iconos). Base movil-first: 40px, el minimo tactil recomendado
     para tocar con el dedo (pedido explicito 2026-08-18, "TODOS los
     botones deben tener 40px de alto"). Desktop, con mouse de precision,
     lo reduce a 30px (ver @media 1024px en estilos.css). */
  --alto-boton: 40px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--font-cuerpo);
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

button {
  font: inherit;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 2px;
}