/* ==========================================================================
   TECNIAPLICACIONES — DESIGN TOKENS
   Fuente única de verdad del sistema de diseño.
   Ningún componente debe declarar color, tipografía o espaciado directamente:
   todo se hereda de estas variables (Capítulo 10 del manual).
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------
     COLOR
     El AZUL PROFUNDO (Navy) es la base cromática dominante — fondos
     oscuros, texto, footer. El ENGINEERING BLUE es el color exclusivo de
     interacción (botones, links, hover, estados activos, indicadores):
     nunca decora, nunca domina.
     Refinamiento v1.1: tono más profundo, desaturado y sólido — cercano
     al acero estructural pintado (RAL 5011 / 7031), alejado
     deliberadamente del azul "SaaS" o corporativo-tecnológico.
     -------------------------------------------------------------------- */

  /* Azul corporativo — base dominante */
  --color-navy-950: #071a33;   /* secciones oscuras, footer, overlays */
  --color-navy-950-rgb: 7, 26, 51; /* canal RGB — para overlays con alfa (resuelve deuda técnica registrada) */
  --color-navy-900: #0b2545;   /* azul corporativo principal */
  --color-navy-700: #1c3a63;   /* variante intermedia sobre fondos oscuros */

  /* Engineering Blue — exclusivo para interacción (v1.1: más profundo y sólido) */
  --color-steel-700: #14303f;  /* estado hover / activo — casi negro-acero */
  --color-steel-500: #2e6178;  /* azul técnico — interacción / marca */
  --color-steel-300: #7ca0ac;  /* variante clara — legible sobre fondo oscuro */
  --color-steel-100: #e9f1f3;  /* tinte mínimo — fondo hover sutil / focus-ring */

  /* Neutros — concreto, acero, vidrio */
  --color-ink:       #0a0e14;  /* texto principal, negro frío */
  --color-grey-700:  #2a2e34;  /* texto secundario sobre blanco */
  --color-grey-500:  #5c636d;  /* texto terciario, metadatos */
  --color-grey-300:  #aeb3b9;  /* bordes, separadores */
  --color-grey-200:  #d3d6da;  /* bordes sutiles, líneas divisorias */
  --color-grey-100:  #e8eaec;  /* fondos alternos muy suaves */
  --color-surface:   #f5f6f7;  /* fondo "concreto claro" */
  --color-white:     #ffffff;

  /* Semántico */
  --color-bg:            var(--color-white);
  --color-bg-alt:        var(--color-surface);
  --color-bg-dark:       var(--color-navy-950);
  --color-text:          var(--color-ink);
  --color-text-muted:    var(--color-grey-500);
  --color-text-inverse:  var(--color-white);
  --color-border:        var(--color-grey-200);
  --color-interactive:          var(--color-steel-500);
  --color-interactive-hover:    var(--color-steel-700);
  --color-interactive-on-dark:  var(--color-steel-300);
  --color-focus-ring:           var(--color-steel-500);

  /* --------------------------------------------------------------------
     TIPOGRAFÍA
     Inter gobierna títulos y cuerpo de texto.
     IBM Plex Mono queda restringida ÚNICAMENTE a anotación técnica
     puntual: numeración de metodología, coordenadas / datos técnicos,
     etiquetas de proceso, especificaciones. Nunca como recurso gráfico
     recurrente (eyebrows generales, notas de imagen, etc. usan Inter).
     -------------------------------------------------------------------- */

  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Escala tipográfica — alineada a ritmo vertical de 4px (submúltiplo
     del baseline de 8px del sistema de retícula). Line-height en valores
     absolutos, no proporcionales, para garantizar alineación real. */
  --text-xs:   0.75rem;   /* 12px / lh 16px */
  --text-sm:   0.875rem;  /* 14px / lh 20px */
  --text-base: 1rem;      /* 16px / lh 24px */
  --text-md:   1.125rem;  /* 18px / lh 28px */
  --text-lg:   1.5rem;    /* 24px / lh 32px */
  --text-xl:   2rem;      /* 32px / lh 40px */
  --text-2xl:  2.75rem;   /* 44px / lh 52px */
  --text-3xl:  3.5rem;    /* 56px / lh 64px */

  --lh-xs:  1rem;      /* 16px */
  --lh-sm:  1.25rem;   /* 20px */
  --lh-base: 1.5rem;   /* 24px */
  --lh-md:  1.75rem;   /* 28px */
  --lh-lg:  2rem;      /* 32px */
  --lh-xl:  2.5rem;    /* 40px */
  --lh-2xl: 3.25rem;   /* 52px */
  --lh-3xl: 4rem;      /* 64px */

  --tracking-label: 0.06em; /* uso en eyebrows Inter (no mono) */
  --tracking-mono:  0.04em; /* uso en anotación técnica mono */

  /* --------------------------------------------------------------------
     ESPACIADO — escala modular base 8px (unidad de ritmo vertical macro)
     -------------------------------------------------------------------- */
  --space-1:  0.25rem; /*  4px — sub-unidad de ritmo tipográfico */
  --space-2:  0.5rem;  /*  8px — unidad base de la retícula */
  --space-3:  1rem;    /* 16px */
  --space-4:  1.5rem;  /* 24px */
  --space-5:  2rem;    /* 32px */
  --space-6:  3rem;    /* 48px */
  --space-7:  4rem;    /* 64px */
  --space-8:  6rem;    /* 96px  — separación estándar entre secciones */
  --space-9:  8rem;    /* 128px — separación en desktop amplio */
  --space-10: 10rem;   /* 160px */

  /* --------------------------------------------------------------------
     RETÍCULA — sistema de 12 columnas (ver grid-system.md para el
     documento completo de composición)
     -------------------------------------------------------------------- */
  --container-max: 1440px;

  --grid-columns-desktop: 12;
  --grid-columns-tablet: 8;
  --grid-columns-mobile: 4;

  --grid-gutter-desktop: var(--space-5); /* 32px */
  --grid-gutter-tablet:  var(--space-4); /* 24px */
  --grid-gutter-mobile:  var(--space-3); /* 16px */

  --grid-margin-desktop: var(--space-8); /* 96px */
  --grid-margin-tablet:  var(--space-6); /* 48px */
  --grid-margin-mobile:  var(--space-4); /* 24px */

  --container-padding-mobile: var(--grid-margin-mobile);
  --container-padding-tablet: var(--grid-margin-tablet);
  --container-padding-desktop: var(--grid-margin-desktop);

  /* --------------------------------------------------------------------
     BORDES — geometría precisa, casi sin curvatura (arquitectónico)
     -------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm: 2px;   /* botones, inputs */
  --border-width: 1px;

  /* --------------------------------------------------------------------
     SOMBRAS — un único sistema, extremadamente sutil, con tinte navy.
     Uso restringido: nunca en cards editoriales (v1.1), solo en overlays
     puntuales que realmente lo requieran (menús flotantes, modales).
     -------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(11, 37, 69, 0.06);
  --shadow-md: 0 4px 16px rgba(11, 37, 69, 0.08);

  /* --------------------------------------------------------------------
     MOVIMIENTO
     Dos velocidades con propósitos distintos:
     - "engineering": reveals de sección, scroll, cinematográfico, lento.
     - "precise": microinteracciones (hover, foco) — extremadamente
       rápido y con desaceleración pronunciada, nivel Linear/Stripe/Apple.
       Nunca debe notarse como "animación", solo como respuesta inmediata.
     -------------------------------------------------------------------- */
  --ease-engineering: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-precise: cubic-bezier(0.16, 1, 0.3, 1);

  --duration-micro: 120ms;  /* hover, foco, cambios de color */
  --duration-fast: 150ms;
  --duration-base: 350ms;   /* reveals de bloque */
  --duration-slow: 650ms;   /* transiciones de sección completas */

  /* --------------------------------------------------------------------
     BREAKPOINTS (documentales — usar como referencia en media queries;
     CSS no permite var() dentro de @media, por eso se listan aquí como
     constante de arquitectura y se repiten literalmente en el CSS)
     -------------------------------------------------------------------- */
  /* mobile:  0 – 639px    → 4 columnas  */
  /* tablet:  640 – 1023px → 8 columnas  */
  /* desktop: 1024px+      → 12 columnas */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-micro: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}