/* ============================================================================
   INGEMET · TOKENS
   Sistema de diseño. Todo color, tipografía, espacio y motion nace aquí.
   Si quieres cambiar la identidad del sitio, se cambia en este archivo.
   ========================================================================== */

:root {
  /* --- Color -------------------------------------------------------------
     Base fría derivada de la propia fotografía de producto: los materiales
     están registrados sobre negro con luz de borde verde azulada.          */
  --ink: #06090c;          /* fondo base */
  --ink-2: #080d11;        /* fondo alterno de sección */
  --graphite: #0d141a;     /* superficie */
  --steel: #141e26;        /* superficie elevada */
  --steel-2: #1c2831;      /* superficie sobre superficie */

  --chalk: #edf3f7;        /* texto principal */
  --fog: #9dadb9;          /* texto secundario */
  --fog-dim: #828f99;      /* texto terciario: etiquetas, cotas, metadatos
                              Verificado 6.0:1 sobre --ink y 4.5:1 sobre
                              la superficie más clara del sistema.        */

  /* Acento de marca. Interacción, foco, estado activo. */
  --teal: #16bfae;
  --teal-bright: #45e7d5;
  --teal-deep: #0a7a70;

  /* Acento técnico. Solo para la capa de anotación: cotas, ejes, índices.
     Es la única nota cálida del sitio y viene de la ropa de seguridad
     que aparece en la fotografía principal.                                */
  --amber: #e8a33d;

  --line: rgba(237, 243, 247, 0.09);
  --line-soft: rgba(237, 243, 247, 0.05);
  --line-strong: rgba(237, 243, 247, 0.16);

  /* --- Tipografía --------------------------------------------------------
     Archivo para todo lo que se lee. IBM Plex Mono para todo lo que se
     mide: cotas, códigos de norma, índices, etiquetas de campo.            */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Escala fluida. min → max entre 380px y 1440px de viewport. */
  --t-mono: 0.6875rem;                                  /* 11px etiquetas   */
  --t-xs: clamp(0.75rem, 0.72rem + 0.13vw, 0.8125rem);
  --t-sm: clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);
  --t-base: clamp(0.9375rem, 0.9rem + 0.19vw, 1.0625rem);
  --t-lg: clamp(1.0625rem, 1rem + 0.31vw, 1.25rem);
  --t-xl: clamp(1.25rem, 1.13rem + 0.5vw, 1.625rem);
  --t-2xl: clamp(1.5rem, 1.26rem + 1.03vw, 2.25rem);
  --t-3xl: clamp(2rem, 1.55rem + 1.94vw, 3.25rem);
  --t-4xl: clamp(2.5rem, 1.65rem + 3.63vw, 5rem);
  --t-5xl: clamp(3rem, 1.5rem + 6.5vw, 7.5rem);

  --lh-tight: 0.98;
  --lh-snug: 1.12;
  --lh-normal: 1.5;
  --lh-relaxed: 1.68;

  --track-display: -0.035em;
  --track-mono: 0.14em;

  /* --- Espacio -----------------------------------------------------------  */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);
  --gutter: clamp(1.25rem, 0.6rem + 2.8vw, 3rem);
  --measure: 62ch;

  /* --- Estructura --------------------------------------------------------  */
  --container: 1360px;
  --container-narrow: 940px;
  --header-h: 74px;

  /* Radio pequeño y constante: lectura de canto mecanizado, no de burbuja. */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* --- Motion ------------------------------------------------------------  */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --d-fast: 180ms;
  --d-base: 320ms;
  --d-slow: 620ms;
  --d-reveal: 900ms;

  /* --- Elevación ---------------------------------------------------------  */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 32px 70px -24px rgba(0, 0, 0, 0.85);
  --glow-teal: 0 0 0 1px rgba(22, 191, 174, 0.35), 0 18px 50px -20px rgba(22, 191, 174, 0.45);

  color-scheme: dark;
}

/* Ajuste de densidad en pantallas grandes: la retícula respira más. */
@media (min-width: 1600px) {
  :root {
    --container: 1480px;
  }
}