/* ==========================================================================
   AIREAN · tokens de marca
   Colores, tipografía y estilos base. Las fuentes se alojan en el propio
   servidor (carpeta fuentes/, licencia OFL): sin peticiones a Google.

   Cambios respecto a la primera versión del kit:
   · se añade el azul de las ilustraciones (#3B88A2) como segundo acento,
     con sus variantes legibles para texto en claro y en oscuro;
   · se añaden los roles --acento-2 y --acento-2-texto.
   ========================================================================== */

/* --- Fuentes ------------------------------------------------------------ */

@font-face {
  font-family: "Archivo";
  src: url("fuentes/archivo-var.7b9c840d698b.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fuentes/archivo-italic-var.8f0af69914f0.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}
/* Subconjuntos oficiales de IBM (Latin1) */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fuentes/IBMPlexMono-Regular-Latin1.23b4f5fce19d.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fuentes/IBMPlexMono-Medium-Latin1.2bdc5f6e5e80.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fuentes/IBMPlexMono-SemiBold-Latin1.e3879a5733bc.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

/* --- Colores de marca --------------------------------------------------- */

:root {
  --airean-tinta: #1A1814;          /* negro cálido */
  --airean-papel: #F2EDE3;          /* crudo */
  --airean-arcilla: #D24A26;        /* la bola. Acento gráfico; texto solo ≥ 24 px (3,8:1 sobre papel) */
  --airean-arcilla-texto: #B8401F;  /* enlaces y texto pequeño de acento sobre papel (4,8:1) */
  --airean-arcilla-clara: #E8673F;  /* acento en modo oscuro (5,4:1 sobre tinta) */
  --airean-cielo: #C9DEE7;          /* bandas y fondos suaves (tinta encima: 12,7:1) */

  /* Azul de las ilustraciones. Segundo acento, para marcar un segundo
     significado (p. ej. «ejecución óptima» frente a «repertorio abierto»),
     nunca para decorar: la regla del acento único sigue en pie. */
  --airean-azul: #3B88A2;           /* gráfico; texto solo ≥ 24 px (3,4:1 sobre papel) */
  --airean-azul-texto: #327288;     /* texto pequeño sobre papel (4,6:1) */
  --airean-azul-claro: #49A9C9;     /* texto sobre tinta (7,1:1) */

  /* Roles: modo claro (por defecto) */
  --fondo: var(--airean-papel);
  --texto: var(--airean-tinta);
  --texto-suave: #5F594F;           /* 5,9:1 sobre papel */
  --borde: #8A8378;                 /* bordes de campos y controles: 3,2:1 */
  --linea: #D9D2C5;                 /* separadores decorativos */
  --acento: var(--airean-arcilla);
  --acento-texto: var(--airean-arcilla-texto);
  --acento-2: var(--airean-azul);
  --acento-2-texto: var(--airean-azul-texto);
  --banda: var(--airean-cielo);

  /* Tipografía */
  --fuente-titulos: "Archivo", "Arial Black", system-ui, sans-serif;
  --fuente-texto: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-datos: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Forma */
  --radio: 6px;
  --objetivo-tactil: 44px;
}

/* Modo oscuro: automático, salvo que la página fije data-theme="light" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: var(--airean-tinta);
    --texto: var(--airean-papel);
    --texto-suave: #B3AC9F;         /* 7,9:1 sobre tinta */
    --borde: #7A7368;               /* 3,8:1 */
    --linea: #3A352E;
    --acento: var(--airean-arcilla-clara);
    --acento-texto: var(--airean-arcilla-clara);
    --acento-2: var(--airean-azul-claro);
    --acento-2-texto: var(--airean-azul-claro);
    --banda: #26323B;               /* papel encima: 11,2:1 */
  }
}
:root[data-theme="dark"] {
  --fondo: var(--airean-tinta);
  --texto: var(--airean-papel);
  --texto-suave: #B3AC9F;
  --borde: #7A7368;
  --linea: #3A352E;
  --acento: var(--airean-arcilla-clara);
  --acento-texto: var(--airean-arcilla-clara);
  --acento-2: var(--airean-azul-claro);
  --acento-2-texto: var(--airean-azul-claro);
  --banda: #26323B;
}

/* --- Base --------------------------------------------------------------- */

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--fuente-titulos);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); }
h3 { font-size: 1.25rem; font-stretch: 112%; font-weight: 700; }

p { text-wrap: pretty; }

/* Navegación, etiquetas, fechas, datos técnicos */
nav, time, code, kbd, .dato { font-family: var(--fuente-datos); }
.etiqueta {
  font-family: var(--fuente-datos);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

a {
  color: var(--acento-texto);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--texto); }

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

/* Botón principal: tinta sobre papel; al pasar, el acento */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: var(--objetivo-tactil);
  padding: 0.65em 1.2em;
  border: 0;
  border-radius: var(--radio);
  background: var(--texto);
  color: var(--fondo);
  font-family: var(--fuente-datos);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.boton:hover { background: var(--acento-texto); color: var(--fondo); }

/* Botón secundario */
.boton--borde {
  background: transparent;
  color: var(--texto);
  box-shadow: inset 0 0 0 2px var(--texto);
}
.boton--borde:hover { background: var(--texto); color: var(--fondo); }

/* Banda de color para destacar una sección */
.banda { background: var(--banda); color: var(--texto); }

/* Fondo de textura. El color base de las dos texturas coincide casi
   exactamente con papel y tinta, así que se pueden sangrar sin que se note
   el corte; el color de respaldo cubre el caso de que la imagen no cargue. */
.textura {
  background-color: var(--fondo);
  background-image: url("texturas/textura-clara.77b80326e11b.webp");
  background-size: cover;
  background-position: center;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .textura {
    background-image: url("texturas/textura-oscura.4612562efdd1.webp");
  }
}
:root[data-theme="dark"] .textura {
  background-image: url("texturas/textura-oscura.4612562efdd1.webp");
}

/* La bola: marca de sección, viñeta o estado activo */
.con-bola::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--acento);
  vertical-align: 0.08em;
}

input, select, textarea {
  font: inherit;
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  min-height: var(--objetivo-tactil);
}