/* Travesía Consultores — tokens de marca (v1, octubre 2026) */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* Color — tema claro (por defecto) */
  --bruma: #F4F6F5;        /* fondo de página (60%) */
  --casco: #FFFFFF;        /* tarjetas, tablas, formularios */
  --linea: #D5DDE0;        /* filetes y bordes */
  --tinta: #13283F;        /* texto principal */
  --tinta-suave: #4E5E6B;  /* texto secundario */
  --marino: #13283F;       /* color de identidad (30%) */
  --sobre-marino: #F4F6F5; /* texto sobre marino */
  --senal: #F2B33D;        /* acento ámbar (máx. 10%, un foco por vista) */
  --sobre-senal: #13283F;  /* texto sobre ámbar — nunca blanco */
  --senal-texto: #8A5A00;  /* ámbar como texto sobre fondo claro */
  --agua: #2F6F73;         /* apoyo: enlaces, íconos, gráficos */
  --agua-suave: #DCEBEA;   /* fondo de destacados y citas */
  --enlace: var(--agua);
  --focus-ring: 0 0 0 2px #F4F6F5, 0 0 0 4px #2F6F73;

  /* Tipografía */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif; /* con font-stretch: 112% */
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;    /* font-stretch: 100% */
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Escala tipográfica (escritorio; en móvil, titular 36/40 y título 26/32) */
  --fs-titular: 52px;   --lh-titular: 56px;  /* peso 640, tracking -0.01em */
  --fs-titulo: 32px;    --lh-titulo: 38px;   /* peso 620 */
  --fs-subtitulo: 22px; --lh-subtitulo: 30px;/* peso 600 */
  --fs-cuerpo: 17px;    --lh-cuerpo: 27px;   /* peso 400 */
  --fs-chico: 15px;     --lh-chico: 23px;
  --fs-etiqueta: 12px;  --lh-etiqueta: 16px; /* peso 600, MAYÚSCULAS, tracking 0.14em */
  --fs-dato: 14px;      --lh-dato: 20px;     /* mono, peso 500 */

  /* Espaciado (base 4px) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

  /* Radios: cantos casi rectos */
  --radius-sm: 2px; --radius-md: 6px; --radius-lg: 14px; /* lg solo ícono de app */

  --max-texto: 68ch;
  --max-pagina: 1160px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bruma: #0D1B2A; --casco: #14273A; --linea: #2B3F52;
    --tinta: #EEF2F3; --tinta-suave: #A7B4BE;
    --marino: #24466B; --sobre-marino: #F4F6F5;
    --senal-texto: #F2B33D;
    --agua: #7DBDBE; --agua-suave: #1E4A4E;
    --focus-ring: 0 0 0 2px #0D1B2A, 0 0 0 4px #7DBDBE;
    color-scheme: dark;
  }
}