/* =========================================================================
   ARGENT · Design tokens
   Dirección visual: C · Latente (aprobada 2026-08-17)
   SSOT del sistema. Ninguna página debe declarar un color o un tamaño
   tipográfico literal: todo se consume desde aquí.
   ========================================================================= */

:root {

  /* ---------- Color ----------------------------------------------------
     El territorio es la plata, pero el haluro real es un gris de
     temperatura fría. Nada de cromados ni degradados metálicos.
     ------------------------------------------------------------------- */
  --c-bg:            #0e0f11;   /* fondo base, el más profundo            */
  --c-surface:       #131417;   /* superficie elevada, secciones alternas */
  --c-surface-2:     #1d2024;   /* tarjetas, insets                       */
  --c-line:          #2a2c31;   /* bordes y divisiones                    */
  --c-line-strong:   #3a3d44;   /* bordes en hover / foco                 */

  --c-ink:           #eef0f2;   /* texto principal                        */
  --c-ink-dim:       #878b93;   /* texto secundario, 5.5:1 sobre --c-bg   */
  --c-ink-faint:     #63666d;   /* solo para elementos no textuales       */
  --c-accent:        #9aa7b4;   /* el gris-azul de la plata latente       */

  --c-inverse-bg:    #eef0f2;   /* bloques invertidos (CTA fuerte)        */
  --c-inverse-ink:   #0e0f11;

  --c-focus:         #9aa7b4;

  /* ---------- Tipografía -----------------------------------------------
     Una sola familia. La jerarquía la construyen el peso y el tracking,
     no el contraste de familias.
     ------------------------------------------------------------------- */
  --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --w-light:  300;   /* display                                           */
  --w-regular:400;   /* texto                                             */
  --w-medium: 500;   /* énfasis, etiquetas                                */

  /* Escala fluida. El display siempre en --w-light con tracking negativo. */
  --t-display: clamp(2.25rem, 1.35rem + 3.9vw, 4.5rem);
  --t-h1:      clamp(1.95rem, 1.3rem + 2.7vw, 3.25rem);
  --t-h2:      clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  --t-h3:      clamp(1.15rem, 1.02rem + 0.55vw, 1.4rem);
  --t-lead:    clamp(1rem, 0.95rem + 0.28vw, 1.15rem);
  --t-body:    0.975rem;
  --t-small:   0.85rem;
  --t-label:   0.66rem;   /* eyebrow / mono, siempre en mayúsculas        */

  --lh-tight: 1.08;
  --lh-snug:  1.3;
  --lh-body:  1.62;

  --tr-display: -0.025em;  /* tracking negativo en tamaños grandes        */
  --tr-h:       -0.015em;
  --tr-label:    0.2em;    /* tracking amplio en etiquetas pequeñas       */
  --tr-mark:     0.46em;   /* el wordmark, la firma del sistema           */

  /* ---------- Espacio ---------------------------------------------------
     Escala de 4px. --s-section usa clamp para respirar en móvil.
     ------------------------------------------------------------------- */
  --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-section: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* ---------- Layout ---------------------------------------------------- */
  --w-page:   1240px;   /* contenedor ancho, para retículas de portafolio */
  --w-text:   68ch;     /* medida de lectura cómoda                       */
  --w-narrow: 780px;
  --pad-x:    clamp(1.25rem, 0.6rem + 2.6vw, 3rem);

  /* ---------- Otros ----------------------------------------------------- */
  --radius: 2px;        /* casi recto. La retícula manda, no el redondeo. */
  --ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:    260ms;
}

/* La marca es de fondo oscuro por definición, así que no hay tema claro.
   Se fija el esquema para que el navegador pinte los controles nativos
   (scrollbars, autofill de formularios) en coherencia con el sitio. */
:root { color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}