/* =========================================================================
   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.
     ------------------------------------------------------------------- */
  /* Carbón medio, no negro. Las fotografías del portafolio son en clave baja:
     si el lienzo es tan oscuro como ellas, la imagen pierde su borde y se
     derrama en la página. El fondo tiene que ser más claro que la media de
     las fotos para que cada una se lea como un objeto sobre una superficie. */
  --c-bg:            #2b2f36;   /* fondo base, carbón medio               */
  --c-surface:       #23272d;   /* superficie recogida, secciones alternas*/
  --c-surface-2:     #333840;   /* tarjetas, insets                       */
  --c-line:          #454b54;   /* bordes y divisiones                    */
  --c-line-strong:   #5a616b;   /* bordes en hover / foco                 */

  --c-ink:           #f2f4f6;   /* texto principal                        */
  --c-ink-dim:       #a8aeb6;   /* texto secundario, 5.4:1 sobre --c-bg   */
  --c-ink-faint:     #7c838c;   /* solo para elementos no textuales       */

  /* El acento pasó del gris azulado al dorado apagado: es el color de la
     plata envejecida y del papel de revelado. Da calidez y dirige la mirada
     sin competir con la fotografía, cosa que un rojo sí haría. */
  --c-accent:        #d2ac3a;
  --c-accent-ink:    #7d620e;   /* el mismo acento, oscurecido para leerse    */
                                /* sobre lienzo claro: 5.1:1, cumple AA      */

  --c-inverse-bg:    #f2f4f6;   /* bloques invertidos (CTA fuerte)        */
  --c-inverse-ink:   #1a1d22;

  /* ---------- Secciones en luz ----------------------------------------
     El portafolio se muestra sobre lienzo claro, como se cuelga una copia
     en una sala. Estos valores los consume .section--luz, que redefine los
     tokens de arriba dentro de su bloque: cualquier componente que entre
     ahí se adapta solo, sin CSS extra.
     ------------------------------------------------------------------- */
  --luz-bg:          #f2f1ed;
  --luz-surface:     #e8e7e2;
  --luz-surface-2:   #dedcd6;
  --luz-line:        #cfcdc6;
  --luz-line-strong: #b3b0a8;
  --luz-ink:         #16181c;
  --luz-ink-dim:     #5b6068;
  --luz-ink-faint:   #8b9098;

  --c-focus:         #d2ac3a;

  /* ---------- 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; }
}