/* ==========================================================================
   FIDAL Consultoría y Litigio — tokens.css
   Sistema de diseño · Fase 2 · Fuente única de variables
   Identidad: dos tintas (marrón profundo + azul pizarra), fondos blanco/marfil,
   Arial para todo, Georgia bold EXCLUSIVAMENTE para el wordmark "FIDAL".
   Prohibido: otros colores, gradientes, sombras pesadas, mayúsculas sostenidas.
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------
     1. Color — paleta cerrada. No se admite ningún valor fuera de esta lista.
     -------------------------------------------------------------------- */
  --color-tinta: #261E1C;          /* marrón profundo: texto, titulares */
  --color-acento: #4B5561;         /* azul pizarra: hairlines, enlaces, subtítulos */
  --color-fondo: #FFFFFF;          /* fondo principal */
  --color-marfil: #EBF0F6;         /* gris marfil oficial: bandas alternas, footer */
  --color-blanco: #FFFFFF;         /* texto sobre acento (botón primario) */

  /* Contraste verificado (WCAG 2.1):
     tinta  sobre blanco  16.3:1  AAA
     tinta  sobre marfil  14.3:1  AAA
     acento sobre blanco   7.6:1  AA texto normal
     acento sobre marfil   6.6:1  AA texto normal
     blanco sobre acento   7.6:1  AA texto normal
     blanco sobre tinta   16.3:1  AAA                                    */

  /* --------------------------------------------------------------------
     2. Tipografía
     Georgia bold SOLO en --fuente-wordmark (wordmark "FIDAL" de respaldo).
     Todo lo demás: Arial. Sin webfonts. Nunca text-transform: uppercase.
     -------------------------------------------------------------------- */
  --fuente-base: Arial, Helvetica, sans-serif;
  --fuente-wordmark: Georgia, 'Times New Roman', serif;

  /* Escala tipográfica (móvil primero; los tamaños mayores escalan con clamp) */
  --texto-xs: 0.8125rem;                          /* 13px — notas, pie */
  --texto-sm: 0.875rem;                           /* 14px — meta, etiquetas */
  --texto-base: 1rem;                             /* 16px — cuerpo */
  --texto-md: 1.125rem;                           /* 18px — cuerpo destacado, lead */
  --texto-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);    /* 20–24px — h3 */
  --texto-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);          /* 24–32px — h2 */
  --texto-2xl: clamp(2rem, 1.6rem + 2vw, 3.25rem);        /* 32–52px — h1 / hero */

  --interlineado-compacto: 1.2;    /* titulares */
  --interlineado-base: 1.6;        /* cuerpo */

  /* Tracking amplio para subtítulos y el descriptor del wordmark de respaldo */
  --tracking-amplio: 0.18em;
  --tracking-medio: 0.06em;

  --peso-normal: 400;
  --peso-negrita: 700;             /* énfasis SIEMPRE con negrita, nunca mayúsculas */

  /* --------------------------------------------------------------------
     3. Espaciado — escala base 4px. Mucho aire: preferir los pasos altos.
     -------------------------------------------------------------------- */
  --espacio-1: 0.25rem;    /*   4px */
  --espacio-2: 0.5rem;     /*   8px */
  --espacio-3: 0.75rem;    /*  12px */
  --espacio-4: 1rem;       /*  16px */
  --espacio-5: 1.5rem;     /*  24px */
  --espacio-6: 2rem;       /*  32px */
  --espacio-7: 3rem;       /*  48px */
  --espacio-8: 4rem;       /*  64px */
  --espacio-9: 6rem;       /*  96px */
  --espacio-10: 8rem;      /* 128px */

  /* Respiración vertical de secciones (móvil → se amplía en pantallas grandes) */
  --seccion-vertical: clamp(var(--espacio-8), 6vw + 1rem, var(--espacio-10));

  /* --------------------------------------------------------------------
     4. Layout
     -------------------------------------------------------------------- */
  --ancho-contenedor: 70rem;       /* 1120px — ancho máximo de contenido */
  --ancho-prosa: 42rem;            /* 672px — párrafos largos, legibilidad */
  --margen-lateral: clamp(var(--espacio-4), 4vw, var(--espacio-7));

  /* --------------------------------------------------------------------
     5. Hairline — la línea es EL recurso gráfico de la marca
     -------------------------------------------------------------------- */
  --grosor-hairline: 1px;          /* 0.75px se pierde en pantallas 1x; 1px es el mínimo fiable */
  --hairline: var(--grosor-hairline) solid var(--color-acento);

  /* --------------------------------------------------------------------
     6. Foco visible (accesibilidad) — mismo trazo en todo el sitio
     -------------------------------------------------------------------- */
  --anillo-foco: 2px solid var(--color-acento);
  --anillo-foco-offset: 2px;

  /* --------------------------------------------------------------------
     7. Transiciones — sobrias, solo color/borde. Nada de movimiento ornamental.
     -------------------------------------------------------------------- */
  --transicion-sutil: 160ms ease;
}

/* En pantallas de alta densidad el hairline puede afinarse a 0.75px
   sin riesgo de desaparecer (rango de marca: 0.75–1px). */
@media (min-resolution: 2dppx) {
  :root {
    --grosor-hairline: 0.75px;
  }
}