/* =========================================================================
   TRAZENIA · TOKENS
   Grafito como base, turquesa como voz, ámbar como señal.
   Proporción de uso: 70 % neutros · 25 % turquesa · 5 % ámbar.
   Si el ámbar aparece más de una vez en una pantalla, deja de ser señal.
   ========================================================================= */

:root {
  /* --- marca --- */
  --grafito: #0f1518;
  --acero: #1b2427;
  --acero-alto: #222d31;
  --turquesa: #12b8a0;
  --turquesa-profundo: #0b7c6b;
  --ambar: #f5a524;
  --hueso: #f2f5f4;
  --gris-traza: #5f6f72;
  --gris-claro: #9baaad;

  /* --- superficies (el sitio vive en oscuro) --- */
  --fondo: var(--grafito);
  --fondo-alt: #0b1013;
  --superficie: var(--acero);
  --superficie-alta: var(--acero-alto);
  --linea: #2a3639;
  --linea-suave: #1f2a2d;

  /* --- texto --- */
  --tinta: #ecf1f0;
  --tinta-media: var(--gris-claro);
  --tinta-debil: #6b7a7d;

  /* --- acento --- */
  --acento: var(--turquesa);
  --acento-tenue: rgba(18, 184, 160, 0.14);
  --acento-linea: rgba(18, 184, 160, 0.34);
  --senal: var(--ambar);

  /* --- tipografía --- */
  --display: "Archivo", "Archivo Expanded", "Helvetica Neue", Arial, sans-serif;
  --texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala fija del manual: 12 · 14 · 16.5 · 21 · 26 · 34 · 44.
     No hay tamaños intermedios; lo único que escala con el viewport es el display. */
  --t-12: 0.75rem;
  --t-14: 0.875rem;
  --t-16: 1.03125rem;
  --t-21: 1.3125rem;
  --t-26: 1.625rem;
  --t-34: 2.125rem;
  --t-44: 2.75rem;
  --t-display: clamp(2.75rem, 8.4vw, 7.25rem);
  --t-seccion: clamp(2.125rem, 4.4vw, 3.75rem);

  /* --- retícula y ritmo --- */
  --ancho: 1360px;
  --ancho-lectura: 66ch;
  --margen: clamp(20px, 5vw, 72px);
  /* Alto aproximado de la cabecera fija. Lo usan scroll-padding-top, para que
     las anclas no queden tapadas, y el panel del menú en móvil. */
  --alto-cabecera: clamp(80px, 9vw, 96px);
  --canal: clamp(18px, 2.2vw, 32px);
  --ritmo: clamp(84px, 11vw, 168px);
  --ritmo-corto: clamp(48px, 6vw, 88px);

  /* --- trazo (geometría de plotter: grosor constante, extremos redondeados) --- */
  --trazo-grosor: 2px;
  --trazo-nodo: 9px;

  /* --- movimiento --- */
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-firme: cubic-bezier(0.65, 0, 0.35, 1);
  --rapido: 220ms;
  --medio: 480ms;
  --lento: 900ms;

  --radio: 3px;
  --radio-grande: 6px;
}

/* Sección clara: se invierte el sistema sin cambiar un solo componente.
   Sobre hueso, el turquesa nunca es texto — ahí manda el turquesa profundo. */
.claro {
  --fondo: var(--hueso);
  --fondo-alt: #e8edec;
  --superficie: #ffffff;
  --superficie-alta: #ffffff;
  --linea: #d3dbda;
  --linea-suave: #e0e6e5;
  --tinta: var(--grafito);
  --tinta-media: var(--gris-traza);
  --tinta-debil: #8a9799;
  --acento: var(--turquesa-profundo);
  --acento-tenue: rgba(11, 124, 107, 0.09);
  --acento-linea: rgba(11, 124, 107, 0.3);
}