/* ==========================================================================
   SvH STUDIO — DESIGN TOKENS · dirección "Índice"
   Fuente única de color, tipo, espacio y movimiento.
   Enlazar antes de site.css.

   TESIS
   El estudio no tiene color de acento. La página es tinta sobre papel y el
   único color del sitio es el de los lugares del cliente.

   REGLA DE IMAGEN — de VALOR, no de matiz
   · Cada lugar ABRE con una imagen oscura, a sangre, de borde a borde.
   · Las imágenes claras viven DENTRO de la página, sin marco, sin sombra y
     sin esquina redondeada: al estar casi al mismo valor que el papel se
     integran en vez de flotar.
   ========================================================================== */
:root{
  /* ---------------------------------------------------------------- COLOR */
  --svh-paper:      #FAFAF8;   /* papel — nunca blanco puro */
  --svh-ink:        #101010;   /* tinta — nunca #000 */
  /* .62 no es estético: es el mínimo que pasa WCAG AA sobre el papel.
     A .54 daba 4.02:1 y toda la letra secundaria del sitio reprobaba. */
  --svh-dim:        rgba(16,16,16,.62);   /* descripciones, etiquetas — 5.2:1 */
  --svh-faint:      rgba(16,16,16,.40);   /* separadores, nunca texto */
  --svh-rule:       rgba(16,16,16,.15);   /* filete del índice */
  --svh-guia:       rgba(16,16,16,.19);   /* guía de puntos, en reposo */
  --svh-guia-viva:  rgba(16,16,16,.40);   /* guía de puntos, al pasar encima */
  --svh-subraya:    rgba(16,16,16,.32);   /* subrayado de enlace en reposo */
  --svh-rule-hard:  #101010;              /* filete que abre un grupo */
  --svh-on-tint:      #F2EFEA;            /* texto sobre el color del lugar */
  --svh-on-tint-soft: rgba(242,239,234,.74); /* secundario sobre el lugar */

  /* Color del lugar — lo aporta cada fila, no el sistema.
     Se sobrescribe con --lugar en el elemento. */
  --lugar: #101010;

  /* ----------------------------------------------------------------- TIPO */
  --svh-serif: "Instrument Serif", "Instrument Serif respaldo", Georgia, "Times New Roman", serif;
  --svh-sans:  "Archivo", "Archivo respaldo", system-ui, -apple-system, "Helvetica Neue", sans-serif;

  /* Escala fluida — móvil primero. min → max en px al margen. */
  --t-display:  clamp(2rem, 8.6vw, 6rem);          /*  32 →  96  frontispicio */
  --t-capitulo: clamp(1.75rem, 6.6vw, 3.5rem);     /*  28 →  56  título de capítulo */
  --t-row:      clamp(1.5rem, 6.2vw, 2.75rem);     /*  24 →  44  nombre de fila */
  --t-matiz:    clamp(1rem, 3.9vw, 1.75rem);       /*  16 →  28  el resultado, en itálica */
  --t-flecha:   clamp(0.75rem, 2.5vw, 1.5rem);     /*  12 →  24  flechas de acción */
  --t-value:    clamp(1.25rem, 4.6vw, 2rem);       /*  20 →  32  precio / año */
  --t-lede:     clamp(1rem, 3.7vw, 1.25rem);       /*  16 →  20  entrada */
  --t-body:     1rem;                              /*        16  cuerpo */
  --t-desc:     1rem;                              /*        16  descripción de fila */
  --t-small:    0.75rem;                           /*        12  pie, secundario */
  --t-label:    0.75rem;                           /*        12  etiqueta de grupo */
  --t-eyebrow:  0.75rem;                           /*        12  ojo superior */

  /* Tracking */
  --ls-display: -.022em;
  --ls-row:     -.015em;
  --ls-eyebrow:  .2em;
  --ls-label:    .3em;   /* etiquetas de grupo */
  --ls-names:    .13em;  /* línea de clientes */

  /* Interlínea */
  --lh-display: .94;
  --lh-tight:   1;
  --lh-snug:    1.42;
  --lh-body:    1.55;

  /* ---------------------------------------------------------------- ESPACIO */
  /* Retícula de 4px — todo padding, margen y gap aterriza aquí */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;   --s5:1.25rem;
  --s6:1.5rem; --s8:2rem;   --s10:2.5rem; --s12:3rem; --s16:4rem;
  --s20:5rem;  --s24:6rem;

  /* Ritmo vertical — el índice respira por grupo, no por elemento */
  --rhythm-group: clamp(2.5rem, 8vw, 4.5rem);    /* entre grupos */
  --rhythm-row:   clamp(1rem, 2.6vw, 1.5rem);     /* alto de la fila · 16 → 24 */
  --rhythm-page:  clamp(2rem, 6vw, 4rem);         /* margen superior */
  --rhythm-foot:  clamp(4rem, 12vw, 9rem);        /* margen inferior */
  --rhythm-front: clamp(3.25rem, 11vw, 6.5rem);   /* frontispicio → índice */

  /* --------------------------------------------------------------- LAYOUT */
  --maxw:   920px;    /* medida de índice, no de tabla. 1120 estiraba las filas. */
  --gutter: clamp(1.5rem, 5vw, 3.5rem);
  --bp:     760px;    /* único salto: lista apilada → lista en tres columnas */
  --touch:  44px;
  /* Borde izquierdo real de la columna de contenido. Lo usa todo lo que
     sangra a 100vw pero cuyo TEXTO debe seguir alineado con el índice. */
  --edge:   max(var(--gutter), calc(50vw - (var(--maxw) / 2) + var(--gutter)));

  /* -------------------------------------------------------------- BORDES */
  --radius: 0;        /* el sistema es cuadrado. sin excepciones. */

  /* ---------------------------------------------------- INTERACCIÓN / MOVIMIENTO
     Un solo gesto en todo el sitio: la fila que se abre.
     Sin fade-up al hacer scroll, sin cursor propio, sin marquesina. */
  --motion:      .52s cubic-bezier(.22,1,.36,1);  /* la fila que se abre */
  --motion-telon: .72s cubic-bezier(.22,1,.36,1);  /* el recorte que descubre la foto */
  --motion-cierre:.40s cubic-bezier(.55,0,.45,1);  /* el telón al revés — cerrar es firme */
  --retraso-detalle:.26s;                          /* el texto entra detrás del telón */
  --motion-lento:1.1s cubic-bezier(.22,1,.36,1);  /* el asentamiento de la foto */
  --motion-fast: .18s cubic-bezier(.4,0,.2,1);    /* hover, foco */
  --focus:       2px solid var(--svh-ink);
}